这是示例:

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/

10-13 01:44
查看更多