Question

编辑：这是一个JFiddle目前基于人们的帮助，但仍需要一些工作。

我有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}

Answer 1

这是一个开始： 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更加明显。

Answer 2

@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>

需要帮助在CSS中对齐12个项目

2 个答案: