Question

我有多个输入字段的表单，我想像这样组织它们：

https://jsfiddle.net/dmilos89/58ea82gj/2/

上面使用的表结构布局。我是从布局创建的，以上所有这些我需要使用div创建。以下是我到目前为止的情况：

<div class="formItem">
    <div class="frRow">
        <div class="frCell">
            <span>Results</span>
        </div>
    </div>
    <div class="frRow">
        <div class="frCell">
            <span>Ear</span>
        </div>
        <div class="frCell">
            <span>250</span>
        </div>
        <div class="frCell">
            <span>500</span>
        </div>
        <div class="frCell">
            <span>750</span>
        </div>
        <div class="frCell">
            <span>1000</span>
        </div>
        <div class="frCell">
            <span>1500</span>
        </div>
        <div class="frCell">
            <span>2000</span>
        </div>
        <div class="frCell">
            <span>3000</span>
        </div>
        <div class="frCell">
            <span>4000</span>
        </div>
        <div class="frCell">
            <span>6000</span>
        </div>
        <div class="frCell">
            <span>8000</span>
        </div>
    </div>
    <div class="frRow">
        <div class="frCell">
            <span>SRT<br>SAT</span>
        </div>
        <div class="frCell">
            <span>Recognition</span>
        </div>
    </div>
</div>

我的div结构仍远离理想的布局。我在每个div元素上都使用了css display-table。这是CSS：

div.frRow {
    margin: 5px;
    display: table;
}
div.frCell {
    display: table-cell;
    padding: 5px;
}
div.frCell span {
    font-weight: bold;
    margin-right: 5px;
}

我不确定这是否是布局此类表单字段的最佳方式。请告诉我如何获得所需的布局或是否有更好的方法来实现这一目标。谢谢。

Answer 1

表结构由table > row > cell所以：

组成

您需要将容器 formItem 设置为display:table，将行 frRow 设置为display:table-row以获取表结构

＆＃13;

div.formItem {
  margin: 5px;
  display: table;
}

div.frRow {
  display: table-row;
}

div.frCell {
  display: table-cell;
  padding: 5px;
  border:1px solid #ccc;
}

div.frCell span {
  font-weight: bold;
  margin-right: 5px;
}

＆＃13;

<div class="formItem">
  <div class="frRow">
    <div class="frCell">
      <span>Results</span>
    </div>
  </div>
  <div class="frRow">
    <div class="frCell">
      <span>Ear</span>
    </div>
    <div class="frCell" style="width:100px;min-width:100px;">
      <span>250</span>
    </div>
    <div class="frCell">
      <span>500</span>
    </div>
    <div class="frCell">
      <span>750</span>
    </div>
    <div class="frCell">
      <span>1000</span>
    </div>
    <div class="frCell">
      <span>1500</span>
    </div>
    <div class="frCell">
      <span>2000</span>
    </div>
    <div class="frCell">
      <span>3000</span>
    </div>
    <div class="frCell">
      <span>4000</span>
    </div>
    <div class="frCell">
      <span>6000</span>
    </div>
    <div class="frCell">
      <span>8000</span>
    </div>
  </div>
  <div class="frRow">
    <div class="formItem">
      <div class="frCell">
        <span>SRT<br>SAT</span>
      </div>
      <div class="frCell">
        <span>Recognition</span>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

在你的CSS中

添加这个

 formItem{display:table;}
frRow{display:table-row;}
frCell{display:table-cell}

如何组织div看起来像一张桌子？

2 个答案: