CSS表格单元格输入未占全宽

Question

我的项目中有一个片段，其中包含使用CSS表格为表单布置网格。但是，我无法正常工作，因为它没有像我期望的那样占据整个宽度。

.full_width {
  width: 100%
}
.table {
  display: table;
}
.table_row {
  display: table-row;
}
.table_cell {
  display: table-cell
}
.wrapper_cont {
  width: 48%
}
#cell2 {
  padding-left: 4%
}
.label {
  display: block
}
.margin_bottom {
  margin-bottom: 18px
}

<div class="table full_width">
  <div class="table_cell full_width">
    <div id="does_something_important">
      <div id="does_something_important2">
        <form class="table full_width" method="post">
          <div class="table_row full_width">
            <div class="margin_bottom">
              <div id="cell1" class="table_cell wrapper_cont">
                <span class="label">Name</span>
                <input class="full_width" value="Michael" type="text" />
              </div>
              <div id="cell2" class="table_cell wrapper_cont">
                <span class="label">Email</span>
                <input class="full_width" type="text" />
              </div>
            </div>
            <div class="margin_bottom">
              <div id="cell1" class="table_cell wrapper_cont">
                <span class="label">Name</span>
                <input class="full_width" value="Michael" type="text" />
              </div>
              <div id="cell2" class="table_cell wrapper_cont">
                <span class="label">Email</span>
                <input class="full_width" type="text" />
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

更新：https://jsfiddle.net/kq70cghc/7/

Answer 1

删除额外＆lt; DIV＆GT;你正在使用的标签。

<div class="table full_width">
<div class="table_cell full_width">
    <div id="does_something_important">
        <div id="does_something_important2">
            <form class="table full_width" method="post">
                <div class="table_row full_width">
                        <div id="cell1" class="table_cell wrapper_cont">
                            <span class="label">Name</span>
                            <input class="full_width" value="Michael" type="text"/>
                        </div>
                        <div id="cell2" class="table_cell wrapper_cont">
                            <span class="label">Email</span>
                            <input class="full_width" type="text"/>
                        </div>
                    </div>

            </form>
        </div>
    </div>
</div>

希望这应该有效！

Answer 2

删除介入的margin_bottom div，因为它打破了table-row和table-cell之间的关系。由于您无法在表格行中添加边距，因此要在行之间添加间距，请将填充添加到单元格中：

＆＃13;

＆＃13;

.full_width{width: 100%}
.table{ display: table;}
.table_row{display: table-row;}
.table_cell{display:table-cell;padding-bottom: 18px;}
.wrapper_cont{width: 48%}
#cell2{padding-left: 4%}
.label{display:block}

＆＃13;

<div class="table full_width">
    <div class="table_cell full_width">
        <div id="does_something_important">
            <div id="does_something_important2">
                <form class="table full_width" method="post">
                    <div class="table_row full_width">
                            <div id="cell1" class="table_cell wrapper_cont">
                                <span class="label">Name</span>
                                <input class="full_width" value="Michael" type="text"/>
                            </div>
                            <div id="cell2" class="table_cell wrapper_cont">
                                <span class="label">Email</span>
                                <input class="full_width" type="text"/>
                            </div>
                    </div>
                     <div class="table_row full_width">
                            <div id="cell1" class="table_cell wrapper_cont">
                                <span class="label">Name</span>
                                <input class="full_width" value="Michael" type="text"/>
                            </div>
                            <div id="cell2" class="table_cell wrapper_cont">
                                <span class="label">Email</span>
                                <input class="full_width" type="text"/>
                            </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;