我是 HTML/CSS 的初学者，我想在我的文本下面设置一行，我使用了 border-bottom在我的 CSS 文件中，它在我的文本下方显示了 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>关于Html 和 Css border-bottom 用 2 行代替 1，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43711476/