Question

我正在尝试对齐一段文本框，但允许在它们之间添加标签。不幸的是，他们被推到一边。我敢肯定它可能是一个css字段类型，我不知道会处理这个，但也许有人可以提供帮助。

<div id="boxalign2">
            <p>
              <label>Contact Info</label><br>
              <label>Email:</label> <input type="text"/>
              <label>Office #:</label> <input type="text"/>
              <label>Other:</label> <input type="text"/>

              <label>Preferred method of contact</label>
                <select id = "myList">
                    <option value = "1">Email</option>
                    <option value = "2">Phone</option>
                </select>
            </p>

CSS

#boxalign2 p label{
display: inline-block;
float: left;
clear: left;
width: 100px;
text-align: right;
}

如果以上内容没有显示我的问题，请点击以下内容：http://jsfiddle.net/HLLVt/

Answer 1

您好float中不需要#boxalign2 p label属性，也需要管理标签的宽度，容器取决于您的需要。

Chek this fiddle http://jsfiddle.net/HLLVt/4/

Answer 2

删除每个float / clear对的<p>和label样式以及input标记，它们将排成一行。见http://jsfiddle.net/HLLVt/7/

使用CSS对齐文本框会推出标签

2 个答案: