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