这是示例:
http://jsbin.com/nulocufoka/1/
出于某些原因,具有input
控件的单元格会“跳出”。
<form action="" method="post">
<div class="cell gray">item 1</div>
<div class="cell gray">
<div>
<input type="text" value="1"> piece
</div>
</div>
<div class="cell gray">68</div>
<br>
<div class="cell gray">item 2</div>
<div class="cell gray">
<div>
<input type="text" value="1"> piece
</div>
</div>
<div class="cell gray">18</div>
<br>
...
</form>
CSS:
.cell {
display: inline-block;
margin: 0;
height: 40px;
}
.gray {
background: #ebebeb;
}
最佳答案
我用input
设置了width:80%
的样式(因此适合),还用.cell
设置了vertical-align: top;
的样式,这将阻止“单元格”向上移动。
举个例子:
Demo Here
.cell {
display: inline-block;
margin: 0;
height: 40px;
vertical-align: top;
}
.gray {
background: #ebebeb;
}
.cell1 {
/* ??? */
}
input {
width: 80%;
}
关于html - 具有“div内联块”的模拟表,“输入”电阻,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29508682/