跨度线休息
我有以下问题:
HTML: __CODE__
CSS:
span.info {
margin-left: 10px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
font-weight: bold;
}知道如何对齐第二行吗？
cho*_*ise 82
display:block;
然后你有一个块元素,边距被添加到所有行.
虽然跨度在语义上不是块元素,但有些情况下您无法控制页面DOM.这个答案是针对那些人的.
- 制作跨度显示:块是可怕的做法; 块级跨度称为div. (47认同)
- @Adrian我同意它不会经常发生,但即使在印刷段落中,有时也会有时髦的格式(特别是在儿童书籍中).该文本仍然应作为包含段落的一部分阅读.我们谈论的是语义标记,而不是外观. (2认同)
pok*_*oke 24
<span>s是内联元素,因为这样的样式属性例如width或margin不起作用.您可以通过更改<span>块元素(例如<div>)或使用填充来修复它.
编辑
请注意,span通过添加使元素成为块元素display: block;非常愚蠢,因为span根据定义,它是一个无样式的内联元素,div而是一个无样式的块元素.所以正确的解决方案是使用a div而不是block- span.
- 我认为将`span`改为`p`比使用`div`更"语义"正确. (5认同)
- 为了爱世界上所有善良和善良的人,为什么这不是公认的答案.... Sheesh ...... (4认同)
Shi*_*ryu 11
span是一个内联元素,这意味着如果你使用<br/>它,无论如何都将被视为一行.
更改span为块元素或添加display:block到您的类.
http://www.jsfiddle.net/tZtpr/1/
小智 10
<!DOCTYPE html>
<html>
<body>
<span style="white-space:pre-wrap;">
Line no one
Line no two
And many more line.
This is Manik
End of Line
</span>
</body>
</html>
- 请描述您的解决方案并解释其工作原理 (2认同)
- 为我工作，不知道为什么..但我可以忍受。 (2认同)
尝试添加display: block;(或替换为<span>a <div>)(请注意,这可能会导致其他问题,因为<span>默认情况下是内联 - 但是您没有发布其余的html)
你也可以尝试使用
display:inline-block;
如果您希望 span 元素水平对齐。
如果您想垂直对齐跨度元素，只需使用
display:block;