输入框没有正确排列

对于相当模糊的标题，我想不出更好的描述我的问题。输入框没有正确排列

我有一个简单的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%}

有了这个，我希望两个输入框左对齐，如输入2是具有浮动：权宽度为75％，输入1的父div也以相同的宽度右移。但是，你的排队不正确，我不知道为什么。测试IE8和Firefox 9 - jsfiddle链接：http://jsfiddle.net/nrF2W/

注：我试图做出最简单的例子，但仍然显示我遇到的问题。包含第一个输入框的div旨在不仅仅是一个输入框。

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

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

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

来源

2012-01-17 John

它们是否意味着完全是2个非相关投入？如果输入以任何方式关联，它们应该可能在相同的字段集中。你一定要在单独的字段集中使用吗？ – Deadlykipper 2012-01-17 12:16:59

是的，每个字段集中的输入应该是完全不相关的。 – John 2012-01-17 12:21:57

我刚刚通过你的小提琴示例，发现div的'width：75％'与'div'的宽度不匹配，'fieldset'将'.div'类的宽度改为'76％'你可以做到这一点.. – Murtaza 2012-01-17 12:25:49

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

你有75％的单独的股利，不为输入

来源

2012-01-17 12:12:35 giker

这适用于div内的单个输入框，但如果添加了其他内容，则不起作用。我已经对OP进行了编辑。 – John 2012-01-17 12:29:18

变化.div{float:right;width:75%}到.div input{float:right;width:75%}

来源

2012-01-17 12:11:46 Alex

他们不用排队，因为你是一个div元素上设置属性一方面，另一方面在input元素上。但即使你解决这个问题，设计也不是健壮的 - 检查标签长和/或浏览器窗口非常窄或非常宽时会发生什么。

更健壮的方法是使用一个表，一列中有标签，另一列中有输入字段。然后，第一列将自动根据需要放宽，并且不需要进行75％的任意猜测。

来源

2012-01-17 12:19:52

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

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

编辑：使用我的例子，你对齐输入到标签的大小。这将为任何输入创建一个统一的位置 - 我不知道为什么你坚持使用额外的div。

来源

2012-01-17 12:37:46 Deadlykipper

输入框没有正确排列

回答

相关问题