Html 如何让行内元素出现在新行，或者块元素不占整行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6987834/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make an inline element appear on new line, or block element not occupy the whole line?
提问by Eric Seastrand
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.
我不知道如何用 CSS 做到这一点。如果我只使用一个<br>标签，它可以完美地工作，但出于明显的原因，我试图避免这样做。
Basically, I just want the .feature_descspanto start on a new line, but:
基本上，我只想.feature_descspan从新行开始，但是：
- 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_wrapperwill be a slightly different size, but none will ever be as wide as the entire screen.)
- 如果我将其设为内联元素，则不会有换行符。
- 如果我将其设为块元素，它将扩展以适合整行，将这些图标中的每一个都放在自己的行上，并在屏幕上浪费大量空间（每个
.feature_wrapper大小略有不同，但没有一个会像像整个屏幕一样宽。）
Example code: This works, but uses a brtag:
示例代码： 这有效，但使用了一个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>
I want to style this with CSS to achieve the same result:
我想用 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>
Any ideas? Or am I going about this the wrong way?
有任何想法吗？还是我以错误的方式解决这个问题？
回答by Ibu
You can give it a property display block; so it will behave like a div and have its own line
你可以给它一个属性显示块；所以它会表现得像一个 div 并有自己的行
CSS:
CSS：
.feature_desc {
display: block;
....
}
回答by spliter
Even though the question is quite fuzzy and the HTML snippet is quite limited, I suppose
即使这个问题很模糊，而且 HTML 片段也很有限，我想
.feature_desc {
display: block;
}
.feature_desc:before {
content: "";
display: block;
}
might give you want you want to achieve without the <br/>element. Though it would help to see your CSS applied to these elements.
可能会给你想要在没有<br/>元素的情况下实现。尽管将 CSS 应用于这些元素会有所帮助。
NOTE. The example above doesn't work in IE7 though.
笔记。上面的例子在 IE7 中不起作用。
回答by John Magnolia
I think floats may work best for you here, if you dont want the element to occupy the whole line, float it left should work.
我认为在这里浮动可能最适合你，如果你不希望元素占据整条线，浮动它应该可以工作。
.feature_wrapper span {
float: left;
clear: left;
display:inline
}
EDIT: now browsers have better support you can make use of the do inline-block.
编辑：现在浏览器有更好的支持，您可以使用 do inline-block。
.feature_wrapper span {
display:inline-block;
*display:inline; *zoom:1;
}
Depending on the text-align this will appear as through its inline while also acting like a block element.
根据 text-align 这将显示为通过其内联，同时也像块元素一样。
回答by Registered User
For the block element not occupy the whole line, set it's width to something small and the white-space:nowrap
对于不占据整行的块元素，将其宽度设置为较小的值， white-space:nowrap
label
{
width:10px;
display:block;
white-space:nowrap;
}
