html - 如何阻止文本重叠？

Question

我的页面上有一个水平列表。

<ul class="period-selection">
    <li>Monthly</li>
    <li>Weekly</li>
    <li>Daily</li>
</ul>

这是我的CSS:

.period-selection {
  width: 33.3%;
  text-align: center;
  float: right;
  list-style: none;
}
.period-selection li {
  float: left;
  width: 18%;
}
.period-selection li:last-child {
  margin-left: -12px;
}

当我折叠页面时，文本开始相互重叠。如何将文本分开或避免重叠？

Answer 1

无论其中的文本长度如何，您都为 li 设置了 33.33% 的固定宽度。尝试将其设置为自动。

并删除

margin-left: -12px;

在 li:last-child 上。