Question

我有以下问题：

alt text

Html：

CSS：

span.info{
    margin-left: 10px;
    color: #b1b1b1;
    font-size: 11px;
    font-style: italic;
    font-weight:bold;
}

知道如何对齐第二行吗？

Answer 1

display:block;

然后你有一个块元素，边距被添加到所有行。

虽然跨度在语义上不是块元素，但有些情况下您无法控制页面DOM。这个答案适用于那些人。

Answer 2

span是内联元素，因为width或margin等样式属性不起作用。您可以通过将span更改为块元素（例如div）或使用填充来修复此问题。

修改

请注意，通过添加span将display: block;元素设为块元素是非常愚蠢的，因为span根据定义是一个无样式的内联元素，而div是一种无风格的块元素。因此，正确的解决方案是使用div代替块 - span。

Answer 3

span是一个内联元素，这意味着如果您使用 ，则无论如何都会将其视为一行。

将span更改为块元素，或将display:block添加到您的班级。

http://www.jsfiddle.net/tZtpr/1/

Answer 4

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

Answer 5

尝试添加display: block;（或用替换<div>）（请注意，这可能会导致其他问题，因为默认情况下是内联的 - 但是你没有发布你的其他HTML）

Answer 6

您也可以尝试使用

display:inline-block;

如果您希望span元素水平对齐。

如果你想垂直对齐span元素，只需使用

 display:block;

Answer 7

您希望左侧缩进多行文字。请尝试以下方法：

CSS：

div.info {
    margin-left: 10px;
}

span.info {
    color: #b1b1b1;
    font-size: 11px;
    font-style: italic;
    font-weight:bold;
}

HTML：

<div class="info"><span class="info">blah blah <br/> blah blah</span></div>

跨度线休息

7 个答案:

修改