CSS：在display：inline元素內顯示display：block元素

Question

這段代碼做了我想要的： abc呈現在def旁邊

<style type="text/css">
    div {display: inline;}
</style>
<div>abc</div>
<div>def</div>

但是，這會產生問題：

<style type="text/css">
    div {display: inline;}
</style>
<div>
    <p>abc</p>
    <p>def</p>
</div>
<div>
    <p>ghi</p>
    <p>jkl</p>
</div>
<div>
    <p>mno</p>
    <p>pqr</p>
</div>

因為p仍然具有display:inline ，所以所有單詞都是垂直顯示的。 div中還有其他塊級元素（例如ul ）需要考慮，並且任意多個div。 我不想使p等內聯，因為所需的效果是這樣的：

abc ghi mno
def jkl pqr

我該怎么做呢？ 謝謝。

Answer 1

把這個寫在你的CSS中：

div {
  display: inline-block;
  *display:inline;/*for IE7*/
  *zoom:1;/*for IE7*/
}

Answer 2

您可以使用class：

<style type="text/css">
     .inl {display: inline;}
</style>
<div>
    <p>abc</p>
    <p class="inl">def</p>
</div>
<div>
    <p>ghi</p>
    <p>jkl</p>
</div>

Answer 3

你可以做一個簡單的

 <section id="floated">
     <div>
           <p>abc</p>
           <p>def</p>
      </div>
      <div>
           <p>ghi</p>
           <p>jkl</p>
      </div>
      <div>
           <p>mno</p>
           <p>pqr</p>
      </div>
 </section>

然后在css中

 #floated div {
     display: inline-block;
     width: 200px;
 }

這只是一個簡單的答案，有很多可能性可以實現您想要的目標...

編輯

另一種可能性：

 <div id="multicolumn">
     <div>
          <p>abc</p>
          <p>def</p>
      </div>
      <div>
          <p>ghi</p>
          <p>jkl</p>
     </div>
      <div>
           <p>mno</p>
           <p>pqr</p>
     </div>
 </div>

和CSS：

 #multicolumn {
     -moz-column-width: 200px;
     -webkit-column-width: 200px;
     column-width: 200px;
 }

就像我說的，有無數的可能性。

編輯2

您可以在這里看到它們： http : //jsfiddle.net/ramsesoriginal/VZEsA/

編輯3

感謝您的不贊成評論。 無論如何，示例（此處和jsfiddle中的示例）均已更新以反映新問題。

Answer 4

為什么不只使用span標簽而不是p標簽呢？ 因為p標簽將更改為新行