2

我希望（液体）文本字段和按钮/复选框位于单行上。我的方法只能在 Firefox 和 IE 中正常工作，但不能在 Chrome 中正常工作。Chrome 在复选框和按钮的右侧有一个填充。

我不想在复选框和按钮上设置宽度，因为人们的浏览器字体可能不同，宽度也可能不同。所以我不想使用负边距方法。

有人有更好的解决方案吗？我接受 JavaScript。

在 Firefox 和 chrome 上试试这个链接，你会发现不同之处。

http://jsfiddle.net/9f9dK/2/

#nav {
  width: 100%;
}
#table {
  height: 32px;
  display: table;
  cellpadding: 0;
  width: 100%;
}
#table-row {
  display: table-row;
  cellpadding: 0;
  width: 100%;
  white-space: nowrap;
}
.table-cell {
  display: table-cell;
  white-space: nowrap;
  border-collapse: collapse;
  cellpadding: 0;
  width: 0;
}
#table-cell-textfield {
  width: 100%;
  white-space: nowrap;
}
#table-cell-textfield input {
  width: 100%;
  display: table-cell;
  white-space: nowrap;
}
.table-cell label {
  width: 0;
}
.table-cell input {
}

<div id="table">
  <div id="table-row">
    <div class="table-cell">
      <input name="" type="checkbox" value="" />
      <label>option 1</label>
      <input name="" type="checkbox" value="" />
      <label>this is option 2</label>
      <input name="" type="checkbox" value="" />
      <label>3 is here</label>
      <input name="" type="checkbox" value="" />
      <label>Im 4</label>
      <input name="" type="checkbox" value="" />
      <label>last one</label>
    </div>
    <div id="table-cell-textfield">
      <input name="" type="text" />
    </div>
    <div class="table-cell">
      <input type="button" value="search" />
    </div>
  </div>
</div>
4

1 回答 1

1

尝试将 csswidth属性更改table-cell为1px：

.table-cell {
      display: table-cell;
      white-space: nowrap;
      border-collapse: collapse;
      cellpadding: 0;
      width: 1px;
}

似乎对 Chrome 有效，并且在 Firefox 中看起来还不错。

于 2013-02-04T18:05:54.183 回答