table布局

table 布局

假设我们有如下两个元素:

<label>Name</label>
<input class="inputtext" type="text" />

name的width固定，需要input的宽度自实用屏幕大小，使两个元素始终保持在同一行。

可以这样做

<div class="parent">
    <label>Name</label>
    <input class="inputtext" type="text" />
</div>

.parent {
    display: table;
    width: 100%;
}

.parent label{
    display: table-cell;
    width: 11%;
    padding-left: .4em;
    min-width: .9em;
}

.parent .inputtext {
    display: table-cell;
    width: 80%;
}