Textfield居中列表

我已經實現了以下用戶界面，但它看起來不太好。我想實現我的文本字段在相應的列表項中居中。或者有沒有其他方法可以通過另一種方式（如表格或網格）實現相同的功能？Textfield居中列表

這就是我想：

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>

來源

2014-10-29 casillas

如果硬要你需要d添加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>

來源

2014-10-29 17:28:56 henser

Textfield居中列表

回答

相關問題