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

Question

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

<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 列 table ，我想把它分成三个并垂直对齐，我不擅长 css 所以请帮助我

Answer 1

看看这个，让我知道这是否是您想要的。

http://jsfiddle.net/m4r3wve1/

你只需要少用<tr>。不将每个单独的单元格包装在它自己的行中。

Answer 2

您可以将宽度应用于您的单元格并执行类似以下操作（不是您想要实现的 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/

Answer 3

一个更好的选择（虽然这需要时间）是使用像 zurb foundation 这样的响应式框架，它有一个块组件，可以根据屏幕尺寸改变其状态。这非常适合在手机上观看。

没有不尊重的意思，但由于您似乎是从 html 和 css 开始的，所以我会深入了解它，因为它会加快您的速度。

你会使用类似...

<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-3">
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
</ul>

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

i want to align my check boxes like a grid

html

css

checkbox

alignment