如何使内联元素出现在新行上，或块元素不占用整行？ [英] How to make an inline element appear on new line, or block element not occupy the whole line?

问题描述

我无法弄清楚如何使用CSS。如果我只是使用一个< br> 标签，它的工作完美无瑕，但我想避免这样做的显而易见的原因。

I can't figure out how to do this with CSS. If I just use a <br> tag, it works flawlessly, but I'm trying to avoid doing that for obvious reasons.

基本上，我只想让 .feature_desc span 在新行上开始，

Basically, I just want the .feature_desc span to start on a new line, but:

• 如果我将其设为内联元素，则不会有换行符。


• 如果我将其设置为块元素，它将扩展为适合整行，将每个图标放在自己的行上，浪费屏幕上的大量空间（每个 .feature_wrapper 的大小稍有不同，但没有一个像整个屏幕一样宽。）

• If I make it an inline element, it won't have a line-break.
• If I make it a block element, it will expand to fit the entire line, putting each of these icons on its own line, and wasting tons of space on the screen (each .feature_wrapper will be a slightly different size, but none will ever be as wide as the entire screen.)

示例代码：使用 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风格来实现相同的结果：

I want to style this with CSS to achieve the same result:

<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>

任何想法？

推荐答案

你可以给它一个属性显示块;因此它的行为类似一个div，并有自己的行

You can give it a property display block; so it will behave like a div and have its own line

CSS：

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

这篇关于如何使内联元素出现在新行上，或块元素不占用整行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！