Question

对于相当模糊的标题感到抱歉，我想不出更好的描述我的问题。

我有一个简单的HTML表单：

<html>
<FIELDSET>
    <DIV>
        <SPAN class="label">Label 1</SPAN>
        <DIV class="div">
            <input id="input1" value="The first input box">  
        </DIV>
    </DIV>
    </FIELDSET>    

    <FIELDSET>
        <DIV>
            <SPAN class="label">Label 2</SPAN>
            <INPUT id ="input2" class="textbox" value="the second input box">
        </DIV>
    </FIELDSET>
</html>

带有一些简单的样式

.label{float:left}
.textbox{float:right;width:75%}
.div{float:right;width:75%}

有了这个，我希望两个输入框都保持对齐，因为input2是float：right，宽度为75％，输入1的父div也是右浮动，宽度相同。但是，你没有正确排队，我不知道为什么。在IE8和firefox 9中测试过 - jsfiddle链接：http://jsfiddle.net/nrF2W/

注意：我试图制作一个最简单的例子，它仍然显示我遇到的问题。包含第一个输入框的div不仅仅包含一个输入框。

编辑：比如说初始输入div应该是：

<DIV class="div">
    <input value="1">
    <input type="checkbox"> 
</DIV>

这是一个输入框，后跟一个复选框，位于同一行。将输入框的宽度设置为75％不适用于这种情况。为了澄清，它不是我没有问题排列的输入框的长度，而是它们在左边缺乏对齐。

Answer 1

http://jsfiddle.net/nrF2W/2/

你只有75％的div，而不是输入

Answer 2

将.div{float:right;width:75%}更改为.div input{float:right;width:75%}

Answer 3

它们没有对齐，因为您一方面在div元素上设置属性，另一方面在input元素上设置属性。但即使您解决了这个问题，设计仍然不健全 - 如果标签很长和/或浏览器窗口非常窄或非常宽，请查看会发生什么。

更强大的方法是使用一个表，标签在一列中，输入字段在另一列中。然后第一列将根据需要自动变宽，您无需像75％那样进行任意猜测。

Answer 4

试试这个：http://jsfiddle.net/YE288/11/

它不再是div了 - 我更喜欢使用表单元素列表。但它会根据您设置标签的宽度排列。

编辑：使用我的示例，将输入与标签的大小对齐。这将为任何输入创造一个统一的意志 - 我不确定你为什么坚持使用额外的div。

输入框未正确排列

4 个答案: