时间戳

首页 > 解决方案 > 文本重叠 CSS 样式

html - 文本重叠 CSS 样式

问题描述

我有这样的一行：

<li>Some text here<span style="float:right;">Hello</span></li>

这个想法是单词“Hello”与同一行的正文右侧对齐。

问题是当屏幕尺寸缩小时，两条文本相互重叠，造成混乱。

我希望“这里的一些文本”部分换行，而不是与“你好”部分重叠。

标签： htmlcss

解决方案

您可以将 CSS 媒体查询添加到“Hello”部分，这样当屏幕较小时，Hello 文本会移动到新行。

HTML

<li>Some text here<span class="move-text">Hello</span></li>

CSS

.move-text{
    float: right;

@media screen and (max-width: 200px) {
  .move-text {
    display: block;
  }
}

或者，您可以删除“Hello”文本上的浮动，任何一种方式都可以。

CSS

@media screen and (max-width: 200px) {
  .move-text {
    float: none;
  }
}

希望这有帮助！如果您有任何问题，请发表评论。

推荐阅读