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

Question

带边框的 h1:

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

右浮动"Contents":

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

如何删除右侧插入内容部分的线条？

Answer 1

如果要删除内容开始的行，只需将 background: #fff; 添加到内容 div 样式即可。
如果 border-bottom 必须仅在 "The Rules" 和 "Character Setup" 下，您可以使用 text-decoration: underline; 而不是 border-bottom: 1px solid #aaa; 或将每个 h1 包装在 div 中并添加到包装的 h1 display: inline-block;

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

How to stop border-bottom width from overlapping / overflowing onto float-right div

css

border

overflow

overlap