Question

这是html代码

.sectionToc {
  line-height: 1.8;
  text-shadow: 0px 0px 4px rgba(255, 248, 248, 0.76);
  color: #095D18;
  font-size: 20px;
}

.sectionToc a {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #0D6A48;
  font-size: 20px;
  text-decoration: none;
}

.subsectionToc {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #0D6A48;
  font-size: 20px;
  text-decoration: none;
  margin-left: 20px;
  line-height: 1.8;
}

.subsectionToc a {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #169A9A;
  font-size: 19.5px;
  text-decoration: none;
}

<br /><span class="sectionToc">25 <a 
    href="#x1-2600025" id="QQ2-1-26">URLs,Hyperlinks and Bookmarks</a></span>
<br /><span class="sectionToc">26 <a 
    href="#x1-2700026" id="QQ2-1-27">Header and Footer</a></span>
<br />&#x00A0;<span class="subsectionToc">26.1 <a 
    href="#x1-2800026.1" id="QQ2-1-28">Header and Footer for all pages</a></span>
<br />&#x00A0;<span class="subsectionToc">26.2 <a 
    href="#x1-2900026.2" id="QQ2-1-29">Customising Headers and Footers for different pages</a></span>
<br /><span class="sectionToc">

问题在于，当窗口调整大小时（例如，在移动设备上），该小节的第二行左侧没有空白。例如，尝试调整窗口大小，并查看如何显示26.2小节。第二行没有任何边距。它不会从其父类继承margin。

Answer 1

问题在于.subsectionToc跨度会跨越多行，然后宽度太窄。您需要的是带有display:block而不是inline的元素。 <div>可以。这样一来，您之间就不需要<br>。

.sectionToc {
  line-height: 1.8;
  text-shadow: 0px 0px 4px rgba(255, 248, 248, 0.76);
  color: #095D18;
  font-size: 20px;
}

.sectionToc a {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #0D6A48;
  font-size: 20px;
  text-decoration: none;
}

.subsectionToc {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #0D6A48;
  font-size: 20px;
  text-decoration: none;
  margin-left: 20px;
  line-height: 1.8;
}

.subsectionToc a {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #169A9A;
  font-size: 19.5px;
  text-decoration: none;
}

<div class="sectionToc">
  25 <a href="#x1-2600025" id="QQ2-1-26">URLs,Hyperlinks and Bookmarks</a>
</div>
<div class="sectionToc">
  26 <a href="#x1-2700026" id="QQ2-1-27">Header and Footer</a>
</div>
<div class="subsectionToc">
  26.1 <a href="#x1-2800026.1" id="QQ2-1-28">Header and Footer for all pages</a>
</div>
<div class="subsectionToc">
  26.2 <a href="#x1-2900026.2" id="QQ2-1-29">Customising Headers and Footers for different pages</a>
</div>
<div class="sectionToc">

此外，margin不是继承的属性。

Answer 2

这就是span的工作方式，由于溢出，它会转到下一行，但是在移动屏幕中，下面的行也是同一行的一部分。因此，边距仅在行的开头生效。

如果要将所有span更改为div，请使其对齐相同的边距。并使用负数margin-top使其看起来不错。

这是 JSFiddle 和下面的代码：

.sectionToc {
  line-height: 1.8;
  text-shadow: 0px 0px 4px rgba(255, 248, 248, 0.76);
  color: #095D18;
  font-size: 20px;
  margin-top: -10px;
}

.sectionToc a {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #0D6A48;
  font-size: 20px;
  text-decoration: none;
}

.subsectionToc {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #0D6A48;
  font-size: 20px;
  text-decoration: none;
  margin-left: 20px;
  line-height: 1.8;
  margin-top: -30px;
}

.subsectionToc a {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #169A9A;
  font-size: 19.5px;
  text-decoration: none;
}

<br />
<div class="sectionToc">25 <a href="#x1-2600025" id="QQ2-1-26">URLs,Hyperlinks and Bookmarks</a>
</div>
<br />
<div class="sectionToc">26 <a href="#x1-2700026" id="QQ2-1-27">Header and Footer</a>
</div>
<br />&#x00A0;
<div class="subsectionToc">26.1 <a href="#x1-2800026.1" id="QQ2-1-28">Header and Footer for all pages</a>
</div>
<br />&#x00A0;
<div class="subsectionToc">26.2 <a href="#x1-2900026.2" id="QQ2-1-29">Customising Headers and Footers for different pages</a>
</div>
<br />

余量未应用到整个课堂的多行文字中

2 个答案: