Question

我想获得几个缩进200px的链接。我已将它们包含在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

Answer 1

 <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>

在第一个</div>代码后，你还有一个额外的<a>。

====更新====

只缩放第一行，因为<a>是内联元素。因此，所有<a>元素都被视为一个段落。使用padding的行为与text-indent略有不同：padding会移动每个元素，而text-indent会移动文本段落的第一行。

因此，如果您需要文字缩进效果，请将<a>更改为<p>，或在CSS中为这些display:block元素添加“<a>”。

Answer 2

那是文本缩进的作用。

请尝试其中之一：

div {
   margin-left: 200px;
}

div{
    padding-left: 200px;
}

Answer 3

在您的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>

Answer 4

尝试将此链接放置在确切的中心

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 {
  width: 200px;
  margin: 0 auto;
}
a:link.top {
  text-decoration: none;
  font-size: .90em;
}
a:link.linkout {
  text-decoration: underline;
  border-bottom: 1px solid #000;
}

<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>

Answer 5

尝试通过向其添加所需的margin-left来将完整的DIV转移到右侧。像

div {
    margin-left: xxxPX;   \\ Like 150px
}

它会将你的整个DIV移到右边（用你想要的缩进代替xxx）

css div样式仅适用于div内的第一行而不是div中的所有内容

5 个答案: