Question

我想做以下事情：

aa:   ________
bbbb: ________
ccc:  ________

所以我写道：

<span>aa:</span><input type="text" /><br/>
<span>bbbb:</span><input type="text" /><br/>
<span>cc:</span><input type="text" />

我得到了：

aa:________
bbbb:________
ccc:________

我知道我可以用桌子轻松安排。如果没有尽可能少的CSS表，我该怎么做呢。

感谢。

Answer 1

<style>
    label {
        float: left;
        clear: left;
        width: 3em;
        padding-right: .5em;
    }
</style>

<label for="a">aa:</label> <input id="a" type="text" /><br/>
<label for="b">bbbb:</label> <input id="b" type="text" /><br/>
<label for="c">ccc:</label> <input id="c" type="text" />

Answer 2

一种选择是将span向左浮动，将input向右浮动，同时包裹在div中：

<style type="text/css">
 span.left { float: left; clear: left; }
 input.right { float: right; clear: right; }
 div.container { width: 333px; }
</style>

<div class="container">
 <div><span class="left">aa:</span><input type="text" class="right" /></div>
 <div><span class="left">bbbb:</span><input type="text" class="right" /></div>
 <div><span class="left">ccc:</span><input type="text" class="right" /></div>
</div>

Answer 3

用<span>替换每个<span class='fixedwidth'>并使用此css规则：

.fixedwidth, input{
  display:block;
  float:left;
  clear:left;
  width:100px;
}

Answer 4

试试这个（在FF中测试）：

CSS：

.label
{
    width: 75px; /*Or any width you want*/
    display: inline-block;
}

HTML：

<span class="label">aa:</span><input type="text" /><br/> 
<span class="label">bbbb:</span><input type="text" /><br/> 
<span class="label">cc:</span><input type="text" />

Answer 5

使用一些具有float和clear属性的div。

如何使用CSS对齐HTML表单元素的左边缘？

5 个答案: