html - 如何让行内元素出现在新行上，或者 block 元素不占满整行？

Question

我不知道如何用 CSS 做到这一点。如果我只使用 <br>标签，它可以完美地工作，但出于显而易见的原因，我试图避免这样做。

基本上，我只想要 .feature_desc span换行开始，但是:

• 如果我将它设为内联元素，它就不会换行。
• 如果我把它做成 block 元素，它会展开以适应整行，将这些图标中的每一个都放在自己的行上，并在屏幕上浪费大量空间(每个 .feature_wrapper 的大小略有不同，但没有一个会像整个屏幕一样宽。)

示例代码:这有效，但使用了 br标签:

<li class='feature_wrapper' id='feature_icon_getstart'> 
    <span style='display: none;' class='search_keywords'>started</span> 
    <span class='feature_icon spriteicon_img' id='icon-getstart'><a href='getstarted/index.html' class='overlay_link'></a></span><br/>
    <span class='feature_desc'><a href='getstarted/index.html' >Getting Started Wizard</a></span> 
</li>

我想用 CSS 设置样式以获得相同的结果:

<li class='feature_wrapper' id='feature_icon_getstart'> 
    <span style='display: none;' class='search_keywords'>started</span> 
    <span class='feature_icon spriteicon_img' id='icon-getstart'><a href='getstarted/index.html' class='overlay_link'></a></span>
    <span class='feature_desc'><a href='getstarted/index.html' >Getting Started Wizard</a></span> 
</li>

有什么想法吗？还是我的做法有误？

Answer 1

你可以给它一个属性显示 block ；所以它会像一个 div 一样有自己的行

CSS:

.feature_desc {
   display: block;
   ....
}