将文本第二行的开头对齐到第一行 [英] Align the beginning of second line of text to the first one

问题描述

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

但是正如你可以看到的，第二行上的文本从行的开头开始，我想开始为第一个：

以下是HTML代码：

 < li class =showPosts > 
< span class =greekCross>✚< / span> 
< h5> Hvordan ser jeg statistik omkringbesøgende？< / h5> 
< / li> 
  

和CSS：

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

我试图添加paddings和边距到十字符号，标题在某种形式的框希望文本将排队，但没有成功。我试过以及来自互联网的其他解决方案，但我不能够解决这个问题，所以任何指导是比欢迎。

这里有一个 JSFiddle 。

解决方案

您可以使用以下CSS：

演示小提琴

  .showPosts {
 cursor：pointer; 
 display：table; 
} 
 .showPosts .greekCross，.showPosts h5 {
 display：table-cell; 
} 
  

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

I show on my website posts in list items like in the following image:

But as you can see above, the text on the second line it's starting from the beginning of the row and I would like to start it as the first one:

Here is the HTML code:

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

And the CSS:

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

I've tried to add paddings and margins to the cross symbol or to wrap the heading in some sort of box hoping that the text will line up but with no success. I tried as well other solutions from the Internet but I wasn't able to fix the issue so any guidance is more than welcomed. I hope I've explained myself clear enough.

Here's a JSFiddle.

解决方案

You could use the following CSS:

Demo Fiddle

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

By making each child a distinct cell, you maintain the vertical alignment on resize.

这篇关于将文本第二行的开头对齐到第一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！