Question

js fiddle - https://jsfiddle.net/cdc03s6e/

请帮助对齐div的集合

应该是

Tea    Radio Starting Date TextBox Percentage TextBox %  Name    TextBox
Coffee Radio Starting Date TextBox Percentage TextBox %  Company TextBox

由于我将使用这两行收集很多地方，所以需要一般课程 CSS

<div class=parentClass>
<div><label>Tea</label></div>
<div><input type=radio></div>
<div><label>Starting Date</label></div>
<div><input type=text class=smallTextBox></div>
<div><label>percentage</label></div>
<div><input type=text class=smallTextBox></div>
<div><label>%</label></div>
<div><label>name</label></div>
<div><input type=text class=smallTextBox></div>
</div>

<div class=parentClass>
<div><label>Coffee</label></div>
<div><input type=radio></div>
<div><label>Starting Date</label></div>
<div><input type=text class=smallTextBox></div>
<div><label>Percentage</label></div>
<div><input type=text class=smallTextBox></div>
<div><label>%</label></div>
<div><label>Company</label></div>
<div><input type=text class=smallTextBox></div>
</div>

CSS

.smallTextBox
{width:50px;}

.parentClass {

  > div:nth-child(1) {
    //
  display:inline;
  }

  > div:nth-child(2) {
    //
  display:inline;
  }
}

可以使用表格标签

Answer 1

一种简单的方法是使用css display: table-row和display: table-cell。

根据你的例子，我假设你使用Sass或更少。

.parentClass {
    display:table-row;

    > div { 
        display: table-cell;
    }
}

编辑因为你不能使用css表：如果你不介意行中的每个元素都有相同的宽度（所以宽度不能调整以适应内容），你可以使用flexbox来实现表格外观。

.parentClass {
    display: flex;

    > div {
        flex-grow: 1;
        flex-basis: 0;
    }
}

JS Fiddle

Answer 2

这是你要找的吗？我使用了block和inline-block的组合。 https://jsfiddle.net/cdc03s6e/1/

Answer 3

TeaStarting Datepercentage％名称

只使用一个div并在其中添加元素

Answer 4

对齐此类布局的最佳方法是使用表格以获得最佳用户体验。检查以下代码：

.smallTextBox {
  width: 50px;
}

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

td {
  padding: 4px;
  border: 1px solid #ccc
}

<table class=parentClass>
  <tr>
    <td><label>Tea</label></td>
    <td><input type=radio></td>
    <td><label>Starting Date</label></td>
    <td><input type=text class=smallTextBox></td>
    <td><label>percentage</label></td>
    <td><input type=text class=smallTextBox></td>
    <td><label>%</label></td>
    <td><label>name</label></td>
    <td><input type=text class=smallTextBox></td>
  </tr>
  <tr>
    <td><label>Coffee</label></td>
    <td><input type=radio></td>
    <td><label>Starting Date</label></td>
    <td><input type=text class=smallTextBox></td>
    <td><label>Percentage</label></td>
    <td><input type=text class=smallTextBox></td>
    <td><label>%</label></td>
    <td><label>Company</label></td>
    <td><input type=text class=smallTextBox></td>
  </tr>
</table>

在css中正确对齐多个div - 只有css

4 个答案: