Question

CSS

html {
  background: #FFF;
  font-family: Arial, sans-serif;
}

/* -- Header Styles --*/
header {
  background: #000
}

header h1 {
  text-align: center;
  padding: 10px;
  padding-top: 20px;
  color: #DDD;
}

/* -- Navigation Styles  -- */
nav {
  text-align: center;
  padding: 10px;
  background: #111;
}

nav a {
  text-decoration: none;
  color: #AAA;
  margin: 10px;
}

/* -- Body Styles -- */
article {
  border: 1px black solid;
  width: 40%;
  padding: 10px;
  margin: 10px;
  display: inline-block;
  box-shadow: 2px 2px 8px 3px;
}

#ogpost {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  clear: both;
}

/* -- Footer Styles -- */
footer {
  overflow: auto;
  clear: both;
  background: #222;
}

footer h1 {
  float: left;
  text-align: center;
  width: 20%;
  padding: 5px;
  margin: 5px;
}

footer article {
  width: 10%;
  border: none;
  display: inline-block;
  float: right;
  box-shadow: none;
}

footer a {
  text-decoration: none;
  color: #DDD;
}

footer ul {
  list-style: none;
  text-align: left;
  font-size: 12px;
  padding-left: 0;
}

#cpyrt {
  clear: both;
  background: #010101;
  color: #666;
}

#cpyrt ul {
  display: inline-block;
  font-size: 14px;
  padding: 5px;
}

HTML

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8">

    <title>Dungeon Dudes</title>
    <link rel="stylesheet" type="text/css" href="styles/main.css">
  </head>
  <body>

    <header>
      <h1>Dungeon Dudes</h1>

      <nav>
        <a href="#">Home</a>
        <a href="#">Homebrew</a>
        <a href="#">Campaign</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </nav>
    </header>

    <article id="ogpost">
      <h3>The Site is Running!</h3>

      <p>We are very pleased to announce that Dungeon Dudes is now up and running! Here we will show you various content ranging everywhere from video games to table top games. Our main focus is Dungeons and Dragons but some of us will play wit hother systems and share content about those as well. We will post articles about games, game mechanics, how tos, anything and everything related to games.</p>

      <a href="#">Read more...</a>
    </article>

    <footer>
      <h1>Dungeon<br>Dudes</h1>

      <article>
        <h6>Quick Links</h6>
      </article>

      <article>
        <h6>Support</h6>

        <ul>
          <li><a href="#">FAQ</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </article>

      <article>
        <h6>Follow Us</h6>

        <ul>
          <li><a href="#">Facebook</a></li>
          <li><a href="#">Twitter</a></li>
          <li><a href="#">YouTube</a></li>
        </ul>
      </article>

      <article id="cpyrt">
        <p>&copy 2018 Dungeon Dudes | All Rights Reserved</p>

        <ul>
          <li><a href="#">Terms of Service</a></li>
          <li><a href="#">Support</a></li>
        </ul>
      </article>
    </footer>

  </body>
</html>

上面有两张我尝试过的代码图像，它是输出的。我很困惑为什么会这样。我希望页脚的版权部分等于页脚的宽度。但是，如果我尝试设置宽度，则会在左侧截断。我遇到了一些事情，我知道该如何处理，但我从未遇到过这种情况。

Answer 1

您的#cpyrt元素将需要以下样式来完全变宽：

#cpyrt {
    clear: both;
    background: #010101;
    color: #666;

    /*new styles*/
    box-sizing: border-box;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

现在，您所有的元素都具有默认的box-sizing: content-box;，其中不包含%计算中的填充和边框。而且利润也永远不会增加。因此，您的width: 100%实际上是100％+左侧填充10px +右侧填充10px +左侧填充10px +右侧填充10px ...因此，为什么这么大。因此，请设置框大小并删除左右边距。

html {
    background: #FFF;
    font-family: Arial, sans-serif;
}

/* -- Header Styles --*/

header {
    background: #000
}

header h1 {
    text-align: center;
    padding: 10px;
    padding-top: 20px;
    color: #DDD;
}

/* -- Navigation Styles  -- */

nav {
    text-align: center;
    padding: 10px;
    background: #111;
}

nav a {
    text-decoration: none;
    color: #AAA;
    margin: 10px;
}

/* -- Body Styles -- */

article {
    border: 1px black solid;
    width: 40%;
    padding: 10px;
    margin: 10px;
    display: inline-block;
    box-shadow: 2px 2px 8px 3px;
}

#ogpost {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    clear: both;
}

/* -- Footer Styles -- */

footer {
    overflow: auto;
    clear: both;
    background: #222;
}

footer h1 {
    float: left;
    text-align: center;
    width: 20%;
    padding: 5px;
    margin: 5px;
}

footer article {
    width: 10%;
    border: none;
    display: inline-block;
    float: right;
    box-shadow: none;
}

footer a {
    text-decoration: none;
    color: #DDD;
}

footer ul {
    list-style: none;
    text-align: left;
    font-size: 12px;
    padding-left: 0;
}

#cpyrt {
    clear: both;
    background: #010101;
    color: #666;
    box-sizing: border-box;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

#cpyrt ul {
    display: inline-block;
    font-size: 14px;
    padding: 5px;
}

<header>
    <h1>Dungeon Dudes</h1>

    <nav>
        <a href="#">Home</a>
        <a href="#">Homebrew</a>
        <a href="#">Campaign</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
</header>

<article id="ogpost">
    <h3>The Site is Running!</h3>

    <p>We are very pleased to announce that Dungeon Dudes is now up and running! Here we will show you various content ranging everywhere from video games to table top games. Our main focus is Dungeons and Dragons but some of us will play wit hother systems
        and share content about those as well. We will post articles about games, game mechanics, how tos, anything and everything related to games.</p>

    <a href="#">Read more...</a>
</article>

<footer>
    <h1>Dungeon<br>Dudes</h1>

    <article>
        <h6>Quick Links</h6>
    </article>

    <article>
        <h6>Support</h6>

        <ul>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </article>

    <article>
        <h6>Follow Us</h6>

        <ul>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">YouTube</a></li>
        </ul>
    </article>

    <article id="cpyrt">
        <p>&copy 2018 Dungeon Dudes | All Rights Reserved</p>

        <ul>
            <li><a href="#">Terms of Service</a></li>
            <li><a href="#">Support</a></li>
        </ul>
    </article>
</footer>

HTML5页脚被推到屏幕的左侧

1 个答案: