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>