如何使内联元素出现在新行上,或者块元素不占用整行？

Question

我无法弄清楚如何用CSS做到这一点.如果我只是使用<br>标签,它可以完美地工作,但我试图避免这样做,原因很明显.

基本上,我只是想.feature_desc span开始一个新的线路,但是:

• 如果我使它成为内联元素,它将没有换行符.
• 如果我把它作为一个块元素,它将扩展以适应整条线,将每个图标放在自己的行上,并在屏幕上浪费大量空间(每个.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

你可以给它一个属性显示块; 所以它会表现得像一个div,并有自己的行

CSS:

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

Answer 2

我想,即使问题非常模糊,HTML片段也非常有限

.feature_desc {
    display: block;
}
.feature_desc:before {
    content: "";
    display: block;
}

可能会给你想要你想要没有<br/>元素的实现.虽然将CSS应用于这些元素会有所帮助.

注意.上面的例子在IE7中不起作用.

Answer 3

我认为花车可能在这里最适合你,如果你不希望元素占据整行,浮动它应该工作.

.feature_wrapper span {
    float: left;
    clear: left;
    display:inline
}

编辑:现在浏览器有更好的支持,你可以使用do inline-block.

.feature_wrapper span {
    display:inline-block;
    *display:inline; *zoom:1;
}

取决于text-align,它将通过其内联显示,同时也像块元素一样.

Answer 4

对于块元素不占据整行,将其宽度设置为小而且 white-space:nowrap

label
{
    width:10px;
    display:block;
    white-space:nowrap;
}

Answer 5

使用 Flex 父级也可以。设置flex-direction为column会将每个子项放在一个新行上，并且设置align-items将使它们不占据整个宽度。这是一个小例子：

<div class="parent">
   <a>some links</a>
   <a>that should be on their own lines</a>
   <a>but not take up the whole parent width</a>
</div>

.parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}