如何使用显示来修复宽度：内联框

Question

我正在尝试布局几个div的内联，并希望给它们一个固定的宽度。我目前有：

  <style>
    .af-header{
      border: 1px solid black;
    }



    .menu-item-header{
      border: 1px solid blue;
      width: 200px;

    }

    .menu-item-detail{
      border:1px solid orange;
      width: 400px;

    }

    .menu-item{
      border: 1px solid red;

    }

  </style>

  <table class='af-header'>
    <tr>
      <td width=800>
      <div class='menu-item'>
      <div class='menu-item-header'>my header</div>
      <div class='menu-item-detail'>here is my detail</div>
        </div>
      </td>
    </tr>
    <tr>

    </tr>
  </table>

我遇到的问题是menu-item-header和menu-item-detail会折叠以适应文本，如下面的屏幕截图所示：

如何修正这两个宽度，以便考虑宽度？

Answer 1

使用display: inline-block而非display: inline。

Answer 2

使用display:inline-block div元素将它们排成一行

.af-header div
{
    display:inline-block;
}

Js Fiddle Demo

我不确定你为什么在这里使用table，如果它只是为了利用列效果，那么你不需要使用它。你可以使用div来实现相同的

<div class="af-header">
    <div class='menu-item'>
        <div class='menu-item-header'>my header</div>
        <div class='menu-item-detail'>here is my detail</div>
    </div>
</div>

Js Fiddle without table