将第二行文本的开头与第一行对齐

Question

我在我的网站帖子中显示列表项目，如下图所示：

但正如你在上面看到的那样，第二行的文字是从行的开头开始的，我想把它作为第一行开始：

以下是HTML代码：

<li class="showPosts">
    <span class="greekCross">✚</span>
    <h5>Hvordan ser jeg statistik omkring besøgende?</h5>
</li>

CSS：

.showPosts {
    cursor: pointer;
}
.greekCross {
    color: #00BFF3;
    font-size: 15px;
}
.showPosts > h5 {
    font-size: 15px;
    display: inline;
    padding-left: 5px;
}

我试图在十字符号中添加填充和边距，或者将标题包装在某种框中，希望文本排成一行但没有成功。我也尝试过互联网上的其他解决方案，但我无法解决这个问题，因此任何指导都非常受欢迎。我希望我已经足够清楚地解释了自己。

这是JSFiddle。

Answer 1

你可以漂浮＆＃34; +＆＃34;向左移动，并为H5：

留出一些左边距

<强> DEMO

注意：使用em单位作为<span>和left-margin的宽度，以便它们适应字体大小。

CSS：

.showPosts {
    cursor: pointer;
    list-style-type:none;
    width:200px;
}
.greekCross {
    color: #00BFF3;
    font-size: 15px;
    width:1.5em;
    float:left;
}
.showPosts > h5 {
    font-size: 15px;
    margin-left: 1.5em;
}

Answer 2

您可以使用以下CSS：

Demo Fiddle

.showPosts {
    cursor: pointer;
    display:table;
}
.showPosts .greekCross,.showPosts h5{
    display:table-cell;
}

通过使每个孩子成为一个不同的单元格，您可以在调整大小时保持垂直对齐。

Answer 3

您是否尝试使用否定文字缩进？例如：

.showPosts > h5 {
    font-size: 15px;
    display: inline-block;
    padding-left: 5px;
    text-indent:-25px;
    margin-left: 20px
}

Answer 4

用你问的答案更新了JSFiddle。希望它正确

.showPosts {
    cursor: pointer;
    display:table;
}
.greekCross {
    color: #00BFF3;
    font-size: 15px;
    display:table-cell;
}
.showPosts > h5 {
    font-size: 15px;
    display: inline;
    padding-left: 5px;
    display:table-cell;
}

Answer 5

您可以尝试以下风格

.showPosts {
    cursor: pointer;
}
.greekCross {
    color: #00BFF3;
    font-size: 15px;
    float:left;
}
.showPosts > h5 {
    font-size: 15px;
    padding-left: 5px;
    margin-left:20px;
}

参考：http://jsfiddle.net/dsn0gp4q/