h1定位问题

问题描述 投票：1回答：2

当我试图挤压不应该以那种方式表现的窗口时，展示区域中的h1正在彼此重叠。但是当它不是时，一切都很好。由于我是这个领域的新人，我不明白我做错了什么。谁能告诉我需要修复的地方？ HTML：

body {
  margin: 0;
  padding: 0;
  background: #f4f4f4;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6em;
}


/* GLOBAL */

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

ul {
  padding: 0;
  margin: 0;
}


/* HEADER */

header {
  background-color: #35424a;
  color: #fff;
  padding-top: 30px;
  min-height: 70px;
  border-bottom: #e8491d 3px solid;
}

header a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 17px;
}

header li {
  float: left;
  display: inline;
  padding: 0 20px;
}

header #branding {
  float: left;
}

header #branding h1 {
  margin: 0;
}

header nav {
  float: right;
  margin-top: 10px;
}

header .highlight,
header .current a {
  color: #e8491d;
  font-weight: bold;
}

header a:hover {
  color: #cccccc;
  font-weight: bold;
}


/*Showcase*/

#showcase {
  min-height: 400px;
  background: url('../images/showcase.jpg') no-repeat 0 -400px;
  text-align: center;
  color: #fff;
}

#showcase h1 {
  margin-top: 100px;
  font-size: 55px;
  margin-bottom: 10px;
}

#showcase p {
  font-size: 17px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ACME Web Design</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header>
    <div class="container">
      <div id="branding">
        <h1><span class="highlight">Acme</span> Web Design</h1>
      </div>
      <nav>
        <ul>
          <li class="current"><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="services.html">Services</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <section id="showcase">
    <div class="container">
      <h1>Affordable Professional Web Design</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, dolor, explicabo voluptas quibusdam dolore omnis maiores quidem necessitatibus nulla, iure ullam asperiores illum. Aliquid fuga magnam labore error vitae laborum.</p>
    </div>
  </section>
  <section id="newsletter">
    <div class="container">
      <h1>Subscribe To Our Newsletter</h1>
      <form action="">
        <input type="email" name="email" id="" placeholder="Enter Email">
        <button type="submit" class="button_1">Submit</button>
      </form>
    </div>
  </section>
  <section id="boxes">
    <div class="container">
      <div class="box">
        <img src="images/logo_html.png" alt="">
        <h1>HTML 5 Markup</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
      </div>
      <div class="box">
        <img src="images/logo_css.png" alt="">
        <h1>CSS 3 Styling</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
      </div>
      <div class="box">
        <img src="images/logo_brush.png" alt="">
        <h1>Graphic Design</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
      </div>
    </div>
  </section>
  <footer>
    <p>ACME Web Design, Copyright &copy; 2019</p>
  </footer>
</body>

</html>
html css html5
2个回答
1
投票

你有几个选择：

  1. 如果您想允许标题为较小的屏幕堆叠，您需要对您的CSS进行一些小的更改。我注意到你的css中有以下行：

行高：1.6em;

尝试将此更改为

line-height:1.6;

通常建议使用无单位行高，因为这将允许子元素根据指定的字体大小计算其行高。 Try reading the information here for more in-depth explanation

  1. 如果您希望在调整屏幕大小时将文本保留在一行，则可以使用媒体查询来更改字体大小：

根据你的代码我注意到字体开始堆叠在1204px所以尝试添加这个：

@media screen and (max-width: 1204px) {
#showcase h1 {
    font-size: 45px;
}

}

然后从这里开始测试屏幕大小，然后根据字体开始堆叠的位置添加更多断点。

0
投票

我个人会将样式line-height: 55px;添加到#showcase h1元素，因此文本的高度与它的大小相同。

这将是最终结果：

body {
  margin: 0;
  padding: 0;
  background: #f4f4f4;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6em;
}


/* GLOBAL */

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

ul {
  padding: 0;
  margin: 0;
}


/* HEADER */

header {
  background-color: #35424a;
  color: #fff;
  padding-top: 30px;
  min-height: 70px;
  border-bottom: #e8491d 3px solid;
}

header a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 17px;
}

header li {
  float: left;
  display: inline;
  padding: 0 20px;
}

header #branding {
  float: left;
}

header #branding h1 {
  margin: 0;
}

header nav {
  float: right;
  margin-top: 10px;
}

header .highlight,
header .current a {
  color: #e8491d;
  font-weight: bold;
}

header a:hover {
  color: #cccccc;
  font-weight: bold;
}


/*Showcase*/

#showcase {
  min-height: 400px;
  background: url('../images/showcase.jpg') no-repeat 0 -400px;
  text-align: center;
  color: #fff;
}

#showcase h1 {
  margin-top: 100px;
  font-size: 55px;
  margin-bottom: 10px;
  line-height: 55px;
}

#showcase p {
  font-size: 17px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ACME Web Design</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header>
    <div class="container">
      <div id="branding">
        <h1><span class="highlight">Acme</span> Web Design</h1>
      </div>
      <nav>
        <ul>
          <li class="current"><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="services.html">Services</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <section id="showcase">
    <div class="container">
      <h1>Affordable Professional Web Design</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, dolor, explicabo voluptas quibusdam dolore omnis maiores quidem necessitatibus nulla, iure ullam asperiores illum. Aliquid fuga magnam labore error vitae laborum.</p>
    </div>
  </section>
  <section id="newsletter">
    <div class="container">
      <h1>Subscribe To Our Newsletter</h1>
      <form action="">
        <input type="email" name="email" id="" placeholder="Enter Email">
        <button type="submit" class="button_1">Submit</button>
      </form>
    </div>
  </section>
  <section id="boxes">
    <div class="container">
      <div class="box">
        <img src="images/logo_html.png" alt="">
        <h1>HTML 5 Markup</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
      </div>
      <div class="box">
        <img src="images/logo_css.png" alt="">
        <h1>CSS 3 Styling</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
      </div>
      <div class="box">
        <img src="images/logo_brush.png" alt="">
        <h1>Graphic Design</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
      </div>
    </div>
  </section>
  <footer>
    <p>ACME Web Design, Copyright &copy; 2019</p>
  </footer>
</body>

</html>

希望这可以帮助。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.