0

编辑：这是一个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}
4

2 回答 2

2

这是一个开始：jsFiddle 示例

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-19T16:50:02.070 回答
0

@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-19T16:52:13.240 回答