如何让内联块并排放置？

Question

code pen

的HTML

<table>
  <tr>
    <td>label</td>
    <td id="meow">

      <div id="a"><input type="radio"><input type="radio"></div>
        <div id="b">some text blah blah blah blah blah blah blah blah blah blah</div>
     </td>
   </tr>
 </table>

的CSS

div {
  display: inline-block;
}

#meow {
  width: 300px;
}

td {
  border: 1px solid black;
}

#a {
  background-color: yellow;
}

#b {
  background-color: orange;
}

如何让#b坐在#a的右侧？我不希望文本包含在#a下面，这就是我使用[inline]块级元素的原因。 float: left似乎无法正常工作。

我不想修改#b的大小。

Answer 1

您可以将display:table-cell应用于#a和#b以及white-space:nowrap，以强制#a不要将内部<input>包裹在列，但将它们显示在一行中。

Example

Answer 2

您可以在#b中设置显示块并设置左边距

http://jsfiddle.net/bN9FR/

<强> HTML

<table>
  <tr>
    <td>label</td>
    <td id="meow">

           <div id="a"><input type="radio"><input type="radio"></div><div id="b">some text blah blah blah blah blah blah blah blah blah blah</div>
     </td>
   </tr>
 </table>

<强> CSS

div {
  display: inline-block;
}

#meow {
  width: 300px;
}

td {
  border: 1px solid black;
}

#a {
  background-color: yellow;
    float:left;

}

#b {
  background-color: orange;
    display: block;
    margin-left: 50px;

}