Question

我已经实现了以下UI，但它看起来不太好。我想实现我的文本字段在相应的列表项中居中。或者是否有其他方法可以通过表格或网格等其他方式实现相同的功能？

这就是我想要的：

enter image description here

这就是我得到的

enter image description here

 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>

Answer 1

如果您坚持使用该结构，则需要将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>

列表中的文本域居中

1 个答案: