html - <li> 文本的结尾下降到下一行

标签 html css twitter-bootstrap

<分区>


想改进这个问题吗? 通过 editing this post 添加细节并澄清问题.

关闭 7 年前

我正在处理需要与移动设备兼容的列表。当我缩小窗口宽度时,大多数 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/

上一篇:html - 在两列 div 布局中,右列覆盖左列

下一篇:jquery - 使用 jquery 使字体强到正常不工作

相关文章:

javascript - jquery 数据列表没有传递到 html 元素中

html - 背景大小封面加上背景附件固定在 IE11 中滚动的页面中不起作用

javascript - 具有良好移动支持的多选 jQuery 插件

html - 带有页脚的 Safari 水平滚动问题

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