Question

I want the (liquid)textfield and button/checkbox to be on a single row. My method is only working properly in Firefox and IE, but not in Chrome. Chrome has a padding on the right of the checkbox and the button.

I don’t want to set the width on the check-box and button, because people’s browser font may be different, so does width. So I don’t want to use negative margin method.

Anyone has better solutions? I accept javascript.

Try this link on firefox and chrome, you will find the difference.

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>

Answer 1

Try changing the css width property of table-cell to 1px :

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

Seems to do the trick for Chrome and still looks okay in Firefox.