html - 在 h2 和 span 之间插入边距

Question

我有一个 <h2 class="landing-panel-title>用<span class="landing-panel-icon-right ion-ios-search-strong>嵌套在里面。 span 上的第二类来自名为 ionicons 的自定义图标字体，可能不相关。

这是一个带有图标的标题。我想在图标和标题之间留一个边距(我希望图标在文本之后最右边，当图标在文本左侧时文本在最右边)，自动扩展到它可以。我尝试用 text-align 实现这一点，但到目前为止还无法让它发挥作用。

http://jsfiddle.net/eakfsLr3/

HTML:

<div class="landing-panel">
    <h2 class="landing-panel-title">Site Reviews<span class="landing-panel-icon-right ion-ios-search-strong"></span></h2>    
    <p class="landing-panel-text">I have been searching for different PTC sites, collecting knowledge and data, testing the theories, and made a general collection of what I found useful and relevant.</p>
</div>
<div class="landing-panel">
    <h2 class="landing-panel-title"><span class="landing-panel-icon-left ion-erlenmeyer-flask"></span>Methodical Approach</h2>
    <p class="landing-panel-text">We have collected data and tested the relevant info through my partner in crime, and he's using our guides and the knowledge to build his career in PTCs.</p>
</div>
<div class="landing-panel">
    <h2 class="landing-panel-title">Results<span class="landing-panel-icon-right ion-clipboard"></span></h2>
    <p class="landing-panel-text">We won't serve you bullshit, we give you relevant information that our staff has deemed legit and working. Enjoy the read!</p>
</div>

CSS:

.landing-panel {
    background-color: #d5f5e3;
    padding: 0.5em;
    margin-bottom: 0.5em;
}
.landing-panel-title {
    width: 100%;
}
.landing-panel-icon-right, .landing-panel-icon-left {
    color: #913D88;
    font-size: 3em;
}
.landing-panel-icon-right {
    text-align: right;
}
.landing-panel-icon-left {
    text-align: left;
}
.landing-panel-title, .landing-panel-icon, .landing-panel-text {
    margin: 0;
    padding: 0;
}

感谢任何帮助。

Answer 1

如果我没理解错的话，你想要这个？ http://jsfiddle.net/sergdenisov/yv2xazjh/1/

.landing-panel {
    background-color: #d5f5e3;
    padding: 0.5em;
    margin-bottom: 0.5em;
}
.landing-panel-title {
    display: table-cell;
    width: 100%;
}
.landing-panel-icon {
    display: table-cell;
    color: #913D88;
    font-size: 3em;
}
.landing-panel-title, .landing-panel-icon, .landing-panel-text {
    margin: 0;
    padding: 0;
}

.landing-panel-icon + .landing-panel-title {
    text-align: right;
}

<div class="landing-panel">
    <h2 class="landing-panel-title">Site Reviews</h2>
    <span class="landing-panel-icon ion-ios-search-strong">Icon</span>
    <p class="landing-panel-text">I have been searching for different PTC sites, collecting knowledge and data, testing the theories, and made a general collection of what I found useful and relevant.</p>
</div>
<div class="landing-panel">
    <span class="landing-panel-icon ion-erlenmeyer-flask">Icon</span>
    <h2 class="landing-panel-title">Methodical Approach</h2>
    <p class="landing-panel-text">We have collected data and tested the relevant info through my partner in crime, and he's using our guides and the knowledge to build his career in PTCs.</p>
</div>
<div class="landing-panel">
    <h2 class="landing-panel-title">Results</h2>
    <span class="landing-panel-icon ion-clipboard">Icon</span>
    <p class="landing-panel-text">We won't serve you bullshit, we give you relevant information that our staff has deemed legit and working. Enjoy the read!</p>
</div>