Question

我刚刚在这里写了一些代码。我希望在<span>下方显示<h1>个文字，但如果我将css <h1>或<span>编辑为“display：block”，则会显示父元素<li>也像块一样。

<ul>
 <li><h1>Big Number</h1><span>Description</span></li>
 <li><h1>Big Number</h1><span>Description</span></li>
 <li><h1>Big Number</h1><span>Description</span></li>
</ul>

这是风格：

ul li {
    display: inline;
}

h1 {
    display: inline;
}

span { 
    display: inline;
}

如何将<li>显示为内嵌，<span>文字显示在<h1>下方？

Answer 1

内联框不能干净地包含一个块框。

使用display: inline-block代替inline。

Answer 2

使用这种方式：

ul li {display: inline-block;}
h1    {display: inline-block;}
span  {display: block;}

Answer 3

试试这个SAMPLE

ul li {
    display: inline-block;
}

h1 {
    display: inline;
}

span { 
    display: block;
}

Answer 4

你只需要在ul li选择器上使用inline-block属性。

ul li { display: inline-block }

jsfiddle.net现在不能正常工作，所以我无法为你做一个例子。您还必须删除h1和span样式。

CodePen的一个例子

http://codepen.io/Tudes/pen/dyFDL

您必须在 ul li 选择器上仅使用内联块属性的原因是 h1 是一个块元素意味着它将占据div的整个宽度， span 将在其下方。

为什么我的列表项不显示内联？

4 个答案: