我在HTML / CSS中非常入门,我想在文本下方设置一行,我在CSS文件中使用了border-bottom,它在文本下方显示了2行。我确定我错过了一些东西,但是我只是不知道什么。我不想使用text-decoration:underline,因为我在文本和行之间需要空格。我的问题是<h3></h3>

提前致谢!

这是我的代码:

CSS / HTML



body {
  background-color: #0d0d0d;
}

.center {
  margin: auto;
  width: 50%;
}

h1 {
  font-family: "Taviraj", serif;
  color: white;
  border-bottom: 3px solid #404040;
  display: inline-block;
  padding-bottom: 2px;
  padding: 0px;
}

h3 {
  font-family: "Taviraj", serif;
  color: white;
  border-bottom: 1px solid #404040;
}

p {
  color: #cccccc;
  font-family: "Taviraj", serif;
  font-size: 23px;
  margin: 0px;
}

span {
  color: #ffff1a;
}

span:hover {
  color: #808080;
}

<!--http://jonchretien.com/ -->
<head>
  <title>Jon Chretien | Front End Enginner</title>
  <link rel="stylesheet" type="text/css" href="jonchretiencom_style.css">
  <link href="https://fonts.googleapis.com/css?family=Taviraj" rel="stylesheet">
</head>
<body>
  <div class="center">
    <h1>Hello</h1>
    <p>My name is Jon Chretien. I'm a <a href="https://en.wikipedia.org/wiki/New_York_City" style="text-decoration:none"><span>NYC</span></a> based front end<br>
       engineer currently working on web apps for artists at<br>
        <a href="https://www.spotify.com/" style="text-decoration:none"><span>Spotify</span></a>. Previously at <a href="https://www.nytimes.com/" style="text-decoration:none"><span>The New York Times</span></a>.</p>
    <h3>Selected Works<h3>
  </div>
</body>

最佳答案

您在结束的/标记中忘记了</h3>,因此浏览器从中抽出了两个h3,创建了两行。只需将斜杠插入</h3>即可对其进行修复。



body {
  background-color: #0d0d0d;
}

.center {
  margin: auto;
  width: 50%;
}

h1 {
  font-family: "Taviraj", serif;
  color: white;
  border-bottom: 3px solid #404040;
  display: inline-block;
  padding-bottom: 2px;
  padding: 0px;
}

h3 {
  font-family: "Taviraj", serif;
  color: white;
  border-bottom: 1px solid #404040;
}

p {
  color: #cccccc;
  font-family: "Taviraj", serif;
  font-size: 23px;
  margin: 0px;
}

span {
  color: #ffff1a;
}

span:hover {
  color: #808080;
}

<!--http://jonchretien.com/ -->
<head>
  <title>Jon Chretien | Front End Enginner</title>
  <link rel="stylesheet" type="text/css" href="jonchretiencom_style.css">
  <link href="https://fonts.googleapis.com/css?family=Taviraj" rel="stylesheet">
</head>
<body>
  <div class="center">
    <h1>Hello</h1>
    <p>My name is Jon Chretien. I'm a <a href="https://en.wikipedia.org/wiki/New_York_City" style="text-decoration:none"><span>NYC</span></a> based front end<br>
       engineer currently working on web apps for artists at<br>
        <a href="https://www.spotify.com/" style="text-decoration:none"><span>Spotify</span></a>. Previously at <a href="https://www.nytimes.com/" style="text-decoration:none"><span>The New York Times</span></a>.</p>
    <h3>Selected Works</h3>
  </div>
</body>

10-06 04:15
查看更多