2

（液体）テキストフィールドとボタン/チェックボックスを1行に配置したいと思います。私の方法は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 に答える