我实现了以下 UI，但它看起来不太好。我想让我的文本字段在相应的列表项中居中。或者是否有任何其他方法可以通过表格或网格等其他方式实现相同的功能？
这是我想要得到的:
这是我得到的
input[type="text"]{
display:inline;
margin-bottom:10px;
margin-right:1px;
width: 35px;
text-align:center;
clear: left;
}
label {
color: white;
display: inline-block;
font: normal 8px
}
ul {
padding: 0;
list-style-type: none;
}
li {
overflow: hidden;
}
.parent:nth-of-type(odd) {
background-color: lightgray;
}
.parent:nth-of-type(even) {
background-color: black;
}
<body>
<div id="ValueDiv">
<ul>
<li class="parent">
<input type="text" value="Loading..." id="firstTF"/>
<label for="first">First</label>
</li>
<li class="parent">
<input type="text" value="Loading..." id="secondTF"/>
<label for="second">Second</label>
</li>
<li class="parent">
<input type="text" value="Loading..." id="thirdTF"/>
<label for="third">Third</label>
</li>
<li class="parent">
<input type="text" value="Loading..." id="fourthTF"/>
<label for="fourth">Fourth</label>
</li>
<li class="parent">
<input type="text" value="Loading..." id="fifthTF"/>
<label for="fifth">Fifth</label>
</li>
<li class="parent">
<input type="text" value="Loading..." id="sixthTF"/>
<label for="sixth">Sixth</label>
</li>
<li class="parent">
<input type="text" value="Loading..." id="seventhTF"/>
<label for="seventh">Seventh</label>
</li>
</ul>
最佳答案
如果您坚持使用该结构，则需要将 float:left; 添加到 label
但是 ...
您可以而且应该使用表格以有序的方式显示信息，如下所示:
HTML
<table>
<tbody>
<tr>
<td>First</td>
<td>10</td>
</tr>
<tr>
<td>Second</td>
<td>20</td>
</tr>
<tr>
<td>Third</td>
<td>30</td>
</tr>
</tbody>
</table>
要实现这些边框，您应该查看 border 和 padding css 属性
或者，您也可以像这样使用 dl 元素:
<dl>
<dt>First</dt>
<dd>10</dd>
<dt>Second</dt>
<dd>20</dd>
<dt>Third</dt>
<dd>30</dd>
</dl>
关于html - 文本域在列表中居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26636430/