<分区>
我正在处理需要与移动设备兼容的列表。当我缩小窗口宽度时,大多数 li 元素随页面缩小,但“SETUP”正在下降。我正在使用 Bootstrap 。
.dollar {
font-size: 20px;
font-weight: 600;
vertical-align: top;
position: relative;
top: 17px;
}
.price {
font-size: 83px;
line-height: 1em;
padding: 0 3px;
font-weight: 200;
vertical-align: middle;
margin-right: -15px;
}
.price.in.table2 {
margin-bottom: 20px;
}
.price.in.table2 span {
color: #262626;
}
<ul>
<li>
<div class="price in table2">
<sup class="dollar">$</sup>
<span class="price">5000</span>
<span class="afterprice">/ ONE-TIME SETUP</span>
</div>
</li>
</ul>
最佳答案
你可以设置 whitespace 属性,但如果它不换行,它就会溢出它的容器,从设计的 Angular 来看这更糟糕。您最好减少媒体查询中的字体大小,这样在最小断点处都不会发生。
关于html - <li> 文本的结尾下降到下一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32743049/
相关文章:
javascript - jquery 数据列表没有传递到 html 元素中
html - 背景大小封面加上背景附件固定在 IE11 中滚动的页面中不起作用
javascript - 具有良好移动支持的多选 jQuery 插件
html - CSS:如何使用 calc(100% - 20px) 来填充除固定宽度元素以外的所有区域?
javascript - 每次加载新页面时在 iOS webView 中运行 JS
javascript - 单击可以同时打开图像主菜单和搜索框的两个菜单?它应该打开一个菜单并关闭另一个
javascript - 努力定位使用 jQuery 创建的 div 元素
javascript - 如何在 Bootstrap 中对背景图像应用模糊效果
asp.net - 文本对齐 : center in body causing repeater to center with no override ability