Question

这可能是一个完全愚蠢的问题。这是我的问题 - 我有一个以HTML格式显示的消息框（使用Bootstrap）来显示各种用户警报。它有一个信息图标（使用bootstrap glyphicons）和相关消息。除非消息太长，否则一切看起来都很好。然后第二行将 包装在 图标下。我希望多行包装从第一行开始的地方开始。

所以这是错误的：

(i) This is an incorrect
format of the message

这是正确的：

(i) This is the correct
    format I want

我的HTML / CSS非常简单：

<div class='alert alert-info'>
<span class='glyphicon glyphicon-information'></span>
&nbsp my message comes here.
</div>

但我看了几个网站，包括css-tricks，所有解决方案似乎都很复杂。所以我在这里发帖，看看是否有一种快速简便的方法。

Answer 1

如何将信息包含在其自身的范围内，并将其设置为具有15px的左边距或信息图标的宽度？你不能那样做吗？如果是这样，你可以在

上设置样式

.alert .alert-info {
    margin-left:15px;
}

然后将跨度上的边距设置为0

div .glyphicon glypicon-information{
    margin: 0;
}

Answer 2

您可以使用CSS定位，您需要做的是，使用margin-left: 30px;将整个元素推到左侧，然后将position: relative;分配给容器元素，以便我们确保absolute定位元素不会在野外流出。

现在我们使用position: absolute;作为您的字形图标并使用负left值和正top值来设置图标正确，请根据您的要求调整这些值，休息时间相同的

.alert {
    margin-left: 30px;
    width: 50px;
    position: relative;
}

.alert .glyphicon {
    position: absolute;
    left: -15px;
    top: 2px;
}

Demo

使用CSS正确对齐包装文本

2 个答案: