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标签会改为新行

CSS：显示display：显示内部的块元素：内联元素

4 个答案: