TextFields与标签对齐

Question

我希望所有文本字段和对应标签都在同一行。

<style>
    input[type="text"] {
        display: inline;
        margin-bottom: 10px;
        width: 50px;
        text-align: center;
        float: left;
    }
    label {
        display: inline;
        text-align: right;
        color: black;
    }
</style>

<input type="text" value="Loading..." id="firstTF"/><label for="first">First</label>
<input type="text" value="Loading..." id="secondTF"/><label for="first">Second</label>
<input type="text" value="Loading..." id="thirdTF"/><label for="first">Third</label>
<input type="text" value="Loading..." id="fourthTF"/><label for="first">Fourth</label>
<input type="text" value="Loading..." id="fifthTF"/><label for="first">Fifth</label>
<input type="text" value="Loading..." id="sixthTF"/><label for="first">Sixth</label>
<input type="text" value="Loading..." id="seventhTF"/><label for="first">Seventh</label>

Answer 1

您可以向左浮动这两个元素，设置display: inline-block;并将clear:left;添加到输入中。

＆＃13;

＆＃13;

input[type="text"]{
display:inline;
margin-bottom:10px;
width: 50px;
text-align:center;
float:left;
  clear: left;
}

    label {
        display: inline-block;
      float: left;
        text-align: right;
        color: black;
    }

＆＃13;

<input type="text" value="Loading..." id="firstTF"/><label for="first">First</label>
<input type="text" value="Loading..." id="secondTF"/><label for="first">Second</label>
<input type="text" value="Loading..." id="thirdTF"/><label for="first">Third</label>
<input type="text" value="Loading..." id="fourthTF"/><label for="first">Fourth</label>
<input type="text" value="Loading..." id="fifthTF"/><label for="first">Fifth</label>
<input type="text" value="Loading..." id="sixthTF"/><label for="first">Sixth</label>
<input type="text" value="Loading..." id="seventhTF"/><label for="first">Seventh</label>

＆＃13;

＆＃13;

＆＃13;