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

看看这个，让我知道你是不是想要了解它。

http://jsfiddle.net/m4r3wve1/

您只需少用<tr>即可。不要将每个单独的单元格包裹在其自己的行中。

Answer 2

您可以将宽度应用到您的手机中并执行以下操作（不是100％您要实现的目标，所以如果您需要我修改，请告诉我）... < / p>

<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时，我会加入这个，因为它会为你加快速度。

你会使用类似......

的东西

function test(input, i) {
  switch (input) { //input=1
    case 1:
      searchTerm = "i<10 && i>5";       //this will be 'searchTerm'
      break;
    case 2:
      searchTerm = "i>=10 && i<19";
      break;
    case 3:
      searchTerm = "i>19 && i<24";
      break;
  }
  while (eval(searchTerm)) {      //'searchTerm' converted to boolean expression
    alert(i);           // alert for i=7,8,9
    i++;
  }
}

test(1, 7);           //pass input=1 and i=7

我想将我的复选框对齐为网格

3 个答案: