0

我正在尝试在 HTML 中创建表格视图。如果表格太宽，溢出的内容应该隐藏，但单元格的宽度不应该自动压缩。某些单元格包含多个项目，例如示例中具有类 'btn' 的 div。

以下代码在 Chrome 中有效，但在 IE 8 中，带有 div 的单元格被包装成两行。

<html>

<head>
  <style>
    #container {
      width: 100%;
      overflow: hidden;
      background-color: aqua;
    }
    
    .btn {
      width: 18px;
      height: 18px;
      background-color: red;
    }
    
    .tbl td {
      white-space: nowrap;
    }
    
    .tbl input {
      float: left;
    }
    
    .tbl div {
      float: left;
    }
  </style>
</head>

<body>
  <div id='container'>
    <table class='tbl'>
      <tr>
        <td>Item Name</td>
        <td><input style='width:100px' /></td>
        <td>Barcode</td>
        <td class='td2'><input style='width:80px' />
        </td>
        <td>Item code</td>
        <td><input style='width:50px' /></td>
      </tr>
      <tr>
        <td>Units</td>
        <td><input style='width:100px' /></td>
        <td>Item type</td>
        <td class='td2'><input style='width:80px' />
          <div class='btn'></div>
          <!-- this is causing a wrap to 2 lines -->
        </td>
        <td>ID</td>
        <td><input style='width:50px' /></td>
      </tr>
    </table>
  </div>
</body>

Chrome 中的屏幕截图：

IE8 中的截图：

4

1 回答 1

0

ADIV是块元素，这意味着它不是内联元素。您使用的 CSS 可防止自动换行，但 aDIV不是单词，因此不适用。简单的解决方案是使用内联等效的 a DIV: a SPAN。

于 2012-07-27T14:21:02.133 回答