如何在包含多行的跨度中对齐缩进线？
[英]How to align an indented line in a span that wraps into multiple lines?
问题描述
Does anyone have an idea how to align the second line? 
有谁知道如何对齐第二行？
span.info { margin-left: 10px; color: #b1b1b1; font-size: 11px; font-style: italic; font-weight: bold; }
<span class="info"></span>
7 个解决方案
解决方案1
82 已采纳 2011-01-13 08:16:07
display:block;
then you've got a block element and the margin is added to all lines. 然后你有一个块元素，边距被添加到所有行。
While it's true that a span is semantically not a block element, there are cases where you don't have control of the pages DOM. 虽然跨度在语义上不是块元素，但有些情况下您无法控制页面DOM。 This answer is inteded for those. 这个答案是针对那些人的。
解决方案2
24 2011-01-13 08:15:04
<span> elements are inline elements, as such layout properties such as width or margin don't work. <span>元素是内联元素，因此width或margin等布局属性不起作用。 You can fix that by either changing the <span> to a block element (such as <div> ), or by using padding instead. 您可以通过将<span>更改为块元素（例如<div> ）或使用填充来修复此问题。
Note that making a span element a block element by adding display: block; 注意，通过添加display: block; ，使span元素成为块元素display: block; is redundant, as a span is by definition a otherwise style-less inline element whereas div is an otherwise style-less block element. 是冗余的，因为根据定义， span是一个无样式的内联元素，而div是一个无样式的块元素。 So the correct solution is to use a div instead of a block- span . 所以正确的解决方案是使用div而不是块span 。
解决方案3
11 2011-01-13 08:19:02
span is a inline element which means if you use <br/> it'll b considered as one line anyway. span是一个内联元素，这意味着，如果你使用<br/>它会b反正视为一行。
Change span to a block element or add display:block to your class. 更改span到块元素或添加display:block上您的课。
http://www.jsfiddle.net/tZtpr/1/ http://www.jsfiddle.net/tZtpr/1/
解决方案4
10 2017-08-21 10:39:05
<!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>
解决方案5
5 2011-01-13 08:15:58
try to add display: block; 尝试添加display: block; (or replace the <span> by a <div> ) (note that this could cause other problems becuase a <span> is inline by default - but you havn't posted the rest of your html) （或者用<div>替换<span> ）（请注意，这可能会导致其他问题，因为默认情况下<span>是内联的 - 但是您没有发布其余的html）
解决方案6
3 2016-08-20 08:02:13
Also you can try to use 您也可以尝试使用
display:inline-block;
if you would like the span element to align horizontally. 如果您希望span元素水平对齐。
Incase you would like to align span elements vertically, just use 如果你想垂直对齐span元素，只需使用
display:block;
解决方案7
1 2016-07-13 14:21:57
You want multiple lines of text indented on the left. 您希望左侧缩进多行文本。 Try the following: 请尝试以下方法：
CSS: CSS：
div.info {
margin-left: 10px;
}
span.info {
color: #b1b1b1;
font-size: 11px;
font-style: italic;
font-weight:bold;
}
HTML: HTML：
<div class="info"><span class="info">blah blah <br/> blah blah</span></div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.