我正在尝试获取多个缩进 200 像素的链接。我将它们包含在 div 标签中，并在同一文件中的 css 中设置了 div 标签的样式。我不明白为什么只有第一个链接缩进而其他链接不缩进，即使它们包含在 div 中。谁能发现这里发生了什么？
这是我的 CSS 代码:
<!DOCTYPE html>
<html lang=en>
<head>
<title>Amendment</title>
<style>
body {
font-family: Times, "Times New Roman", New York, serif;
background-image: url('img/bg.jpg');
background-position: center;
margin: 2.54cm;
border: double;
padding: 6mm;
}
h1{
font-size: 2.5em;
}
h2 {
font-style: bold;
font-size: 1.5em;
}
span.brown {
background-color: brown;
}
p {
font-size: 12pt;
}
b{
color: green;
background-color: white;
}
#fifthamendment{
text-decoration: line-through;
}
li{
list-style: none;
}
p:hover {
background-color: white;
}
div {
text-indent: 200px;
}
a:link.top {
text-decoration: none;
font-size: .90em;
}
a:link.linkout {
text-decoration:underline;
border-bottom: 1px solid #000;
}
</style>
</head>
<body>
这是我的 html 代码:
<h1>Amendment Table of Contents</center></h1>
<hr>
<div>
<a href="#Amendment1">Amendment 1: Freedom of Speech, Religion, Press</a><br/>
<a href="#Amendment2">Amendment 2: Right to Bear Arms</a><br/>
<a href="#Amendment3">Amendment 3: Quartering of Soldiers</a><br/>
<a href="#Amendment4">Amendment 4: Searches and Seizures</a><br/>
<a href="#Amendment5">Amendment 5: Due Process</a><br/>
</div>
这是它在我的浏览器中的显示方式:
Amendment Table of Contents
Amendment 1: Freedom of Speech, Religion, Press
Amendment 2: Right to Bear Arms
Amendment 3: Quartering of Soldiers
Amendment 4: Searches and Seizures
Amendment 5: Due Process
最佳答案
这就是文本缩进的作用。
尝试以下方法之一:
div {
margin-left: 200px;
}
div{
padding-left: 200px;
}
关于html - css div 样式仅适用于 div 内的第一行，而不适用于 div 内的所有内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26007788/