html - 我想像网格一样对齐我的复选框

Question

我想让我的复选框像网格一样对齐，看起来更干净，占用的空间更少。但我似乎无法将它与我的图像对齐，而且我在间距方面也遇到了问题。

<table>
                <tr>
                    <td>
                        <img src="images/fb.png" height="40px" width="40px">
                        <input type="checkbox" name="engine" id="engine" value="google">
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="images/twit.png" height="40px" width="40px">
                        <input type="checkbox" name="engine" id="engine" value="yahoo">
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="images/googplus.png" height="40px" width="40px">
                        <input type="checkbox" name="engine" value="bing">
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="images/link.png" height="40px" width="40px">
                        <input type="checkbox" name="engine" value="bing">
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="images/pin.png" height="40px" width="40px">
                        <input type="checkbox" name="engine" value="bing">
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="images/del.png" height="40px" width="40px">
                        <input type="checkbox" name="engine" value="bing">
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="images/stumb.png" height="40px" width="55px">
                        <input type="checkbox" name="engine" value="bing">
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="images/diig.png" height="40px" width="40px">
                        <input type="checkbox" name="engine" value="bing">
                    </td>
                </tr>
            </table>

这段代码只是一个 1 列表，我想把它分成三个并垂直对齐，我不擅长 css 所以请帮助我

Answer 1

您可以将宽度应用到您的单元格并执行类似以下操作(不是您想要实现的 100%，所以如果您需要我修改请告诉我)...

<td width="15%">

但如果你只想要 3 列，所有内容都对齐，请执行类似...

    <table>
            <tr>
                <td>
                    <img src="images/fb.png" height="40px" width="40px">
                </td>
                <td>
                    <input type="checkbox" name="engine" id="engine" value="google">
                </td>
                <td>
                    Your third column content
                </td>
            </tr>
            <tr>
                <td>
                    <img src="images/twit.png" height="40px" width="40px">
                </td>
                <td>
                    <input type="checkbox" name="engine" id="engine" value="yahoo">
                </td>
                <td>
                    Your third column content
                </td>
            </tr>
            <tr>
                <td>
                    <img src="images/googplus.png" height="40px" width="40px">
                </td>
                <td>
                    <input type="checkbox" name="engine" value="bing">
                </td>
                <td>
                    Your third column content
                </td>
            </tr>
            <tr>
                <td>
                    <img src="images/link.png" height="40px" width="40px">
                </td>
                <td>
                    <input type="checkbox" name="engine" value="bing">
                </td>
                <td>
                    Your third column content
                </td>
            </tr>
            <tr>
                <td>
                    <img src="images/pin.png" height="40px" width="40px">
                </td>
                <td>
                    <input type="checkbox" name="engine" value="bing">
                </td>
                <td>
                    Your third column content
                </td>
            </tr>
            <tr>
                <td>
                    <img src="images/del.png" height="40px" width="40px">
                </td>
                <td>
                    <input type="checkbox" name="engine" value="bing">
                </td>
                <td>
                    Your third column content
                </td>
            </tr>
            <tr>
                <td>
                    <img src="images/stumb.png" height="40px" width="55px">
                </td>
                <td>
                    <input type="checkbox" name="engine" value="bing">
                </td>
                <td>
                    Your third column content
                </td>
            </tr>
            <tr>
                <td>
                    <img src="images/diig.png" height="40px" width="40px">
                </td>
                <td>
                    <input type="checkbox" name="engine" value="bing">
                </td>
                <td>
                    Your third column content
                </td>
            </tr>
        </table>

https://jsfiddle.net/tonytansley/czo8rub2/