css - 如何阻止 border-bottom 宽度重叠/溢出到 float-right div

Question

带边框的h1:

h1 {
  font-size: 2.125em;
  border-bottom: 1px solid #aaa;
  width: 100%;
  display: block;
}

右浮动的“内容”:

div {
  float: right;
  clear: right;
  margin-bottom: .5em;
  padding: .5em 0 .8em 1.4em;
  background: transparent;
  max-width: 20em;
}

如何删除右侧穿过内容部分的线条？

Answer 1

如果你想删除内容开始的行，你可以在内容 div 样式中添加 background: #fff;。
如果 border-bottom 必须仅在“规则”和“字符设置”下，您可以使用 text-decoration: underline; 而不是 border-bottom: 1px solid #aaa; 或将每个 h1 包装在 div 中并添加到包装的 h1 display: inline-block;