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

删除您正在使用的多余的<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，因为它破坏了表行和表单元之间的关系。 并且由于无法向表行添加边距，因此要在行之间增加间距，请向单元格中添加填充：

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