1

按照简单的列表，在每个 h4 中，最后都有一个跨度。

<ul class="items">
    <li>
        <h4>Prevent LineBreakOfPlus <span class="goto">o</span>
        </h4>
    </li>
    <li>
        <h4>Digital Signage <span class="goto">o</span></h4>
        … 

</ul>

页面来源截图：

在此处输入图像描述

CSSspan看起来像这样……</p> 

.items .goto {
   font-family: 'QuaySans-Icons';
   font-size: 1.6em;
   position: relative;
   float: right;
}

最后的样子是这样的：

在此处输入图像描述

我遇到的问题是，当减小浏览器窗口的宽度（我正在开发响应式网页设计）时，span-icon 会进入下一行。

在此处输入图像描述

您对如何防止这种情况发生有任何创造性的解决方案或想法吗？

亲切的问候，并提前谢谢你，马特

4

3 回答 3

2

当你有更少的空间时减小你的字体大小。我猜您在最大宽度：480px 的媒体中遇到了问题。我发现减小字体大小是保持响应式网站设计一致的好选择

于 2013-04-09T14:28:15.267 回答
2

如果您希望图标与文本行中的最后一个单词保持一致，您可以简单地执行以下操作：

<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创建视觉间距或在 之前插入&nbsp实体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 值以强调不知道图标高度的问题。您可能需要调整这些以垂直放置图标。

于 2013-04-09T14:32:33.413 回答
0

我已经在演示中模拟了它，但是它有点原始。

.items {
    padding:0;
    margin:0;
    /*width:180px;*/
}
.items li {
    border: 1px solid red;
    list-style-type: none;
    position: relative;
}
.items h4 {
    margin:0; padding:0; font-size:16px; padding-right:10px;
}

.items .goto {
    margin-top: -10px;
    position: absolute;
    right: 0;
    top: 50%;
}

演示

检查以下链接并减小浏览器的宽度。

结果

于 2013-04-09T14:36:08.880 回答