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

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

Hi you don't need the float property in your #boxalign2 p label, also you need to manage the width of the labels and the container depends of what you want.

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

Answer 2

删除每个/对周围的floatandclear样式和<p>标签，它们将全部排成一行。见http://jsfiddle.net/HLLVt/7/labelinput