显示2个带有内联复选框的div？答案

【问题标题】：Displaying 2 divs with checkboxes inline?显示2个带有内联复选框的div？
【发布时间】：2012-06-01 14:48:49
【问题描述】：

2 个 div。仅限 HTML 和 CSS。

在 CSS 中指定第二个 div 位于第一个 div 的右侧。

第二个 div 的标题在预期的位置，但不是复选框。

为什么第二个 div 的复选框不在同一个区域？
（他们更多在第一个 div 下，向左......？）

非常感谢任何帮助。

JsFiddle 中的代码：http://jsfiddle.net/GregMcNulty/2mQ7k/

<html>
    <head>
        <style type="text/css">
            #checkbox1
            {
                display:inline;
                position:relative;
                top:1in;
                left: .5in;                              
            }
            #checkbox2
            {
                display:inline;
                position:relative;
                top:1in;
                left: 1.5in;                
            }   
        </style>    
    </head>
<body>   

      <form>

        <div id="checkbox1">
            Please select the Clamps you are interested in:
        </div>

        <div id="checkbox2">
            Please select the Revets you are interested in: <br />
            <input type="checkbox" name="Solid" /> Solid <br />
            <input type="checkbox" name="Cherry" /> Cherry lock <br />
            <input type="checkbox" name="PopRivets" /> PopRivets <br />
            <input type="checkbox" name="Rivnuts" /> Rivnuts <br />
            <input type="checkbox" name="Huck" /> Huck Clinch
        </div>


    </form>

</body>
</html>

【问题讨论】：

标签： html css browser rendering

【解决方案1】：

你有你的 div inline 我怀疑你真正想要的是 inline-block，同时垂直对齐它们，使它们具有所需的对齐方式。

        #checkbox1
        {
            display:inline-block;
            vertical-align:top;
            position:relative;
            top:1in;
            left: .5in;                              
        }
        #checkbox2
        {
            display:inline-block;
            vertical-align:top;
            position:relative;
            top:1in;
            left: 1.5in;                
        }

FIDDLE

【讨论】：