Question

我刚刚开始学习与CSS一致的HTML5，我正在尝试制作自己的简历（来自Codecademy的练习）。我的问题是我打算制作的副标题，我试图在副标题文本下面放置一条黑线。但是，在行和文本之间存在很大差距。

＆＃13;

#header {
  margin-top: -3.5px;
  background-color: #C3CDD4;
  height: 90px;
  width: 98.5%;
  position: relative;
}

#name {
  font-family:Verdana, Geneva, sans-serif;
  font-size: 40px;
  float: left;
  margin-left: 20px;
  margin-top: 20px;
  /*padding bottom: 50px;*/
}

#address {
  font-family: Verdana, Geneva, sans-serif;
  float:right;
  margin-top: 25px;
  margin-right: 60px;
}

#contact {
  font-family: Verdana, Geneva, sans-serif;
  float: right;
  clear: left;
  margin-top:-60px;
  margin-right: 20px;
}

.subheader {
  position: relative;
  height: 100px;
  margin-left: 20px;
  margin-top: -2.5px;
  font-size: 20px;
  font-family: Verdana;
  border-bottom: 1px solid;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title></title>
  </head>
  <body>
    <div id="header">
      <p id="name"> Vincent William Barker </p>
      <p id="address">67294 Washington Way</p>
      <p id="contact">999.999.9999 · vwbarker@gmail.com</p>

    </div>

    <div class="subheader">
      <h4 class="subheader_title">Education</h4>

    </div>


    <div class="left"></div>
    <div class="right"></div>
    <div id="footer"></div>
  </body>
</html>

＆＃13;

Answer 1

如果您希望div的两侧笔直，请移除属性border-radius: 5px;。您的行与子标题之间的空格归因于此属性 - height: 100px; div中的.subheader。删除该属性，您的问题将得到解决。要使其更接近子标题，您必须删除其边框底部属性。之后，创建一个新div并查看下面的属性。

＆＃13;

#header {
  margin-top: -3.5px;
  background-color: #C3CDD4;
  height: 90px;
  width: 98.5%;
  position: relative;
}
#name {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 40px;
  float: left;
  margin-left: 20px;
  margin-top: 20px;
  /*padding bottom: 50px;*/
}
#address {
  font-family: Verdana, Geneva, sans-serif;
  float: right;
  margin-top: 25px;
  margin-right: 60px;
}
#contact {
  font-family: Verdana, Geneva, sans-serif;
  float: right;
  clear: left;
  margin-top: -60px;
  margin-right: 20px;
}
.subheader {
  position: relative;
  margin-left: 20px;
  margin-top: -2.5px;
  font-size: 20px;
  font-family: Verdana;
}
.line {
  margin-top: -20px;
  height: 1px;
  width: 100%;
  background-color: black;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css" />
  <title></title>
</head>

<body>
  <div id="header">
    <p id="name">Vincent William Barker</p>
    <p id="address">67294 Washington Way</p>
    <p id="contact">999.999.9999 · vwbarker@gmail.com</p>

  </div>

  <div class="subheader">
    <h4 class="subheader_title">Education</h4>

  </div>
  <div class="line">

    <div class="left"></div>
    <div class="right"></div>
    <div id="footer"></div>
</body>

</html>

＆＃13;

CSS border-bottom line不直接在text下

1 个答案: