Question

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

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

任何人都有更好的解决方案？我接受javascript。

在firefox和chrome上尝试此链接，您会发现不同之处。

#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>

Answer 1

尝试将width的css table-cell属性更改为1px：

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

似乎可以为Chrome做这个技巧，但在Firefox中看起来还不错。

带有固定未知宽度的液体宽度文本字段复选框，按钮

1 个答案: