CSS table 单元格输入未占满宽度

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

删除您正在使用的额外 < div> 标签。

<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 行和 table 单元格之间的关系。由于您无法向 table 行添加边距，因此要在行之间添加间距，请改为向单元格添加填充：

.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}

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

CSS table 单元格输入未占满宽度

CSS table cell inputs not taking full width

html

css

formatting