Question

当我在底部给出边框时，它上升并且标题正在下降，因为我们可以在代码中看到粉红色的边框向上，我希望在全名之下

我正在使用此网站的引用并由我自己的https://codepen.io/techie4good/pen/RGNBPQ?q=resume&limit=techie4good

制作

body {
  font-family: Arial, sans-serif;
  font-size: 1.1em;
  width: 75%;
  margin: 0 auto;
}

.main {
  color: #4EC5C1;
}

#name {
  float: left;
}

#contact {
  float: right;
  list-style-type: none;
}

#workExperiance {
  float: left;
}

header {
  border-bottom: solid 2px pink;
  margin: 70px;
}

<html lang="en">

<head>
  <title>Full Name Resume</title>
  <meta charset=utf-8>
</head>

<body>
  <header>
    <section>
      <h1 id="name"><span class="main">full </span> Name</h1>
    </section>
    <section>
      <ul id="contact">
        <li><span class="main">Cell:</span> +1-000000000</li>
        <li><span class="main">Email: </span> aaaaaa@gmail.com</li>
        <li><span class="main">Location:</span> NY,USA.</li>
      </ul>
    </section>
  </header>
  <section id="workExperiance">Work Experience</section>
</body>

</html>

Answer 1

将float: left;width: 100%;添加到.header类

＆＃13;

body {
  font-family: Arial, sans-serif;
  font-size: 1.1em;
  width: 75%;
  margin: 0 auto;
}

.main {
  color: #4EC5C1;
}

#name {
  float: left;
}

#contact {
  float: right;
  list-style-type: none;
}

#workExperiance {
  float: left;
}

header {
  border-bottom: solid 2px pink;
  margin: 70px;
  float: left;
  width: 100%;
}

＆＃13;

<html lang="en">

<head>
  <title>Full Name Resume</title>
  <meta charset=utf-8>
</head>

<body>
  <header>
    <section>
      <h1 id="name"><span class="main">full </span> Name</h1>
    </section>
    <section>
      <ul id="contact">
        <li><span class="main">Cell:</span> +1-000000000</li>
        <li><span class="main">Email: </span> aaaaaa@gmail.com</li>
        <li><span class="main">Location:</span> NY,USA.</li>
      </ul>
    </section>
  </header>
  <section id="workExperiance">Work Experience</section>
</body>

</html>

＆＃13;

Answer 2

添加以下CSS代码行：

header:after {
  content: "";
  display: table;
  clear: both;
}

body {
  font-family: Arial, sans-serif;
  font-size: 1.1em;
  width: 75%;
  margin: 0 auto;
}

.main {
  color: #4EC5C1;
}

#name {
  float: left;
}

#contact {
  float: right;
  list-style-type: none;
}

#workExperiance {
  float: left;
}

header {
  border-bottom: solid 2px pink;
  margin: 70px;
}

header:after {
  content: "";
  display: table;
  clear: both;
}

<html lang="en">

<head>
  <title>Full Name Resume</title>
  <meta charset=utf-8>
</head>

<body>
  <header>
    <section>
      <h1 id="name"><span class="main">full </span> Name</h1>
    </section>
    <section>
      <ul id="contact">
        <li><span class="main">Cell:</span> +1-000000000</li>
        <li><span class="main">Email: </span> aaaaaa@gmail.com</li>
        <li><span class="main">Location:</span> NY,USA.</li>
      </ul>
    </section>
  </header>
  <section id="workExperiance">Work Experience</section>
</body>

</html>

Answer 3

显然浮动：左边是罪犯......删除它并且它有效...

＆＃13;

body {
      font-family: Arial, sans-serif;
      font-size: 1.1em; 
      width: 75%;
      margin: 0 auto;
    }
    .main{color: #4EC5C1;}
    #contact{float:right;list-style-type:none;}
    #workExperiance{float:left;}
    header{border-bottom:solid 2px pink; margin: 70px;}

＆＃13;

<html lang="en">
    
    <head>
      <title>Full Name Resume</title>
      <meta charset=utf-8>
    </head>
    
    <body>
      <header>
        <section>
          <h1><span class="main">full </span> Name</h1>
        </section>
        <section>
          <ul id="contact">
            <li><span class="main">Cell:</span> +1-000000000</li>
            <li><span class="main">Email: </span> aaaaaa@gmail.com</li>
            <li><span class="main">Location:</span> NY,USA.</li>
          </ul>
        </section>
      </header>
      <section id="workExperiance">Work Experience</section>
    </body>
    
    </html>

＆＃13;

当我在标题中给边框问题？

3 个答案: