如果您希望图标与文本行中的最后一个单词保持一致,您可以简单地执行以下操作:
<ul class="items">
<li>
<h4>Prevent LineBreakOfPlus<span class="goto">o</span></h4>
</li>
<li>
<h4>Digital Signage<span class="goto">o</span></h4>
</li>
</ul>
CSS可能是:
.items {
list-style: none;
margin: 0;
padding: 0;
}
.items li {
border-bottom: 1px solid gray;
margin: 0;
padding: 0;
}
.items h4 {
margin: 0;
}
.items .goto {
background-color: gray;
font-size: 1.6em;
margin-left: 10px; /* optional */
}
如果你的作品和 之间没有空格,如果元素被迫流入第二行span
,则主题将简单地跟随单词。li
您可以使用margin-left
创建视觉间距或在 之前插入 
实体span
,有很多方法可以做到。细节取决于你想要什么效果。
小提琴: http: //jsfiddle.net/audetwebdesign/VsBet/(如何做的两个例子)
保持图标右对齐
这是将图标固定在h4
元素右侧的一种方法:
.ex2.items h4 {
position: relative;
line-height: 1.5;
outline: 1px dotted blue;
padding-right: 2.00em;
}
.ex2.items .goto {
background-color: wheat;
line-height: 1.00;
font-size: 1.6em;
position: absolute;
right: 0;
bottom: 0.0em;
height: 1.00em;
width: 1.00em;
outline: 1px dotted red;
}
使用 的绝对定位将span
其保持在 的右侧和底部h4
。如果h4
表格要行,图标将跟随第二行。您可能需要根据图标大小调整位置。如果您允许图标变大,在极端情况下您可能会遇到其他问题。我可能会将图标固定为px
高度或宽度(或最大值)。最后,设置一些padding-right
以h4
防止图标在窗口变小时与文本重叠。
请注意,我明确指定了 line-height 值以强调不知道图标高度的问题。您可能需要调整这些以垂直放置图标。