需要幫助對齊CSS中的12個項目

編輯：這是一個JFiddle它看起來像目前基於人們的幫助，但仍需要一點點的工作。需要幫助對齊CSS中的12個項目

我有12個div和一個容器div。容器div中的12個div組成6個文本和6個相應的輸入字段。

我想它看起來就像這樣......

[Text1 Input Item1  Text2 Input Item2  Text3 Input Item3] 
[Text4 Input Item4  Text5 Input Item5  Text6 Input Item6]

什麼是CSS格式的最佳方式？我嘗試了它，它只是遍佈整個地方，盒子錯位，放錯了行。有人可以幫忙嗎？

<div class="container"> 
    <div class="text1"></div> 
    <div class="InputItem1"></div> 

    <div class="text2"></div> 
    <div class="InputItem2"></div> 

    <div class="text3"></div> 
    <div class="InputItem3"></div> 

    <div class="text4"></div> 
    <div class="InputItem4"></div> 

    <div class="text5"></div> 
    <div class="InputItem5"></div> 

    <div class="text6"></div> 
    <div class="InputItem6"></div> 
</div>

CSS代碼：

.container{width:100%;} 

.text1{width:15%;float:left} 
.InputItem1{width:15%;float:left}  

.text2{width:15%;float:center} 
.InputItem2{width:15%;float:center}  

.text3{width:15%;float:right} 
.InputItem3{width:15%;float:right}  

.text4{width:15%;float:left} 
.InputItem4{width:15%;float:left}  

.text5{width:15%;float:center} 
.InputItem5{width:15%;float:center}  

.text6{width:15%;float:right} 
.InputItem6{width:15%;float:right}

來源

2012-09-19 Hoser

如果你想要的確如此，只需使用'tables';他們仍然用於表格數據 – Phil

我知道這是老式的，但表怎麼樣？ – Horen

這是我第一次使用CSS，所以我從來沒有使用表格，我會檢查出來。 – Hoser

這裏是一個開始：jsFiddle example

HTML

<div class="container" name="container"> 
    <div class="textitem" name="text1">t</div> 
    <div class="inputitem" name="InputItem1">i</div> 

    <div class="textitem" name="text2">t</div> 
    <div class="inputitem" name="InputItem2">i</div> 

    <div class="textitem" name="text3">t</div> 
    <div class="inputitem" name="InputItem3">i</div> 

    <div class="textitem clear" name="text4">t</div> 
    <div class="inputitem" name="InputItem4">i</div> 

    <div class="textitem" name="text5">t</div> 
    <div class="inputitem" name="InputItem5">i</div> 

    <div class="textitem" name="text6">t</div> 
    <div class="inputitem" name="InputItem6">i</div> 
</div>

CSS

.container{width:100%;overflow:auto;} 
div { 
    border:1px solid #999; 
} 

.inputitem,.textitem { 
    float:left; 
    width:15%;  
}

請注意，我說的邊界只是爲了讓更多的div可見。

來源

2012-09-19 16:50:02 j08691

+1請記住使用實際的標籤。 –

這讓我接近，但它看起來像http://imgur.com/ebkBX 我怎樣才能得到它，讓每個文本項目和每個輸入項目左對齊，並且'里程錶'下降到其他人的水平？ – Hoser

這裏有一個JSFiddle爲它http://jsfiddle.net/j08691/PhW5C/ – Hoser

@GionaF是正確的，但還需要設置的類，而不是名爲你的CSS工作。

<div class="container"> <div class="text1"></div> <div class="InputItem1"></div> <div class="text2"></div> <div class="InputItem2"></div> <div class="text3"></div> <div class="InputItem3"></div> <div class="text4"></div> <div class="InputItem4"></div> <div class="text5"></div> <div class="InputItem5"></div> <div class="text6"></div> <div class="InputItem6"></div> </div>

來源

2012-09-19 16:52:13 Ralph

對不起，我輸入的不正確，我正在使用類。 – Hoser

需要幫助對齊CSS中的12個項目

回答

相關問題