Question

我有<h2 class="landing-panel-title>嵌套<span class="landing-panel-icon-right ion-ios-search-strong>。跨度的第二类来自一个名为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

尝试

.landing-panel-title>span{
width:..px /*set as much required */
display:inline-block;
text-align:center;/* left/right */
}

或者如果您只是希望它们之间有一个小的余量，那么将 放在span元素之前

或者如果您只想让图标位于标题的右侧，那么 -

.landing-panel-title>span{
position:absolute;
right:0;
/* This would make icon always at right */
}

Answer 2

将您的span类设为 display：inline-block

    span {
    display:inline-block; /*this enables margins to work*/
    margin: 0 10px;
}

Answer 3

如果我理解正确，你想要这个吗？ this

＆＃13;

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

＆＃13;

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

＆＃13;

在h2和span之间插入一个边距

3 个答案: