Question

按照简单列表，在每个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>

页面来源的屏幕截图：

enter image description here

span的CSS看起来像这样......

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

最后的事情看起来像这样：

enter image description here

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

enter image description here

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

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

Answer 1

空间较小时减小字体大小。我想你的媒体最大宽度有问题：480px。我发现减小字体大小是在响应式网站中保持设计一致的一个很好的替代方案

Answer 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，以防止图标在窗口变小时与文本重叠。

注意我明确指定了行高值，以突出不知道图标高度的问题。您可能需要调整这些以垂直放置图标。

Answer 3

我在演示中嘲笑它，但它有点原始。

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

<强> DEMO

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

<强> RESULT

如何防止跨度进入下一行 - 响应式网页设计？

3 个答案: