Align the beginning of second line of text to the first one

问题

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.

回答1:

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.

回答2:

You can float the "+" left and give some left margin to the H5 :

DEMO

Note : Use em units for the width of the <span> and the left-margin so they adapt to the font-size.

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;
}

回答3:

updated JSFiddle with the answer u asked. Hope its correct

.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;
}

回答4:

Have you tried using a negative text-indent? For example:

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

回答5:

You can try with following style

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

Ref: http://jsfiddle.net/dsn0gp4q/

来源：https://stackoverflow.com/questions/25309682/align-the-beginning-of-second-line-of-text-to-the-first-one

标签

html

css

html5

css3

inline