Css HTML5页脚被推离屏幕左侧_Css

Css HTML5页脚被推离屏幕左侧

css

Css HTML5页脚被推离屏幕左侧,css,Css,CSS HTML 地牢伙计地牢伙计地牢伙计们上面我有两个我尝试过的代码和它的输出。我很不明白为什么会这样。我希望页脚的版权部分等于页脚的宽度。但是如果我试着设置宽度，它会在左边被截断。我曾经遇到过右路被切断的情况，我知道如何应对，但我从来没有遇到过另一种情况您的#cpyrt元素需要以下样式才能像您希望的那样全宽显示： #cpyrt { clear: both; background: #010101; color: #666; /

CSS

HTML


地牢伙计
地牢伙计
地牢
伙计们

上面我有两个我尝试过的代码和它的输出。我很不明白为什么会这样。我希望页脚的版权部分等于页脚的宽度。但是如果我试着设置宽度，它会在左边被截断。我曾经遇到过右路被切断的情况，我知道如何应对，但我从来没有遇到过另一种情况

您的

#cpyrt

元素需要以下样式才能像您希望的那样全宽显示：

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

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

现在，所有元素都有默认的

框大小：content-box

不包括填充物和边框，并进行

计算。而且利润也永远不会增加。所以你的

width:100%

实际上是100%+10px左边填充+10px右边填充+10px左边空白+10px右边空白。。。这就是为什么它如此之大。因此，设置框大小并删除左右边距

html{
背景：#FFF；
字体系列：Arial，无衬线；
}
/*--标题样式--*/
标题{
背景：#000
}
收割台h1{
文本对齐：居中；
填充：10px；
填充顶部：20px；
颜色：#DDD；
}
/*--导航样式--*/
导航{
文本对齐：居中；
填充：10px；
背景：#111；
}
导航a{
文字装饰：无；
颜色：#AAA；
利润率：10px；
}
/*--体型--*/
文章{
边框：1px黑色实心；
宽度：40%；
填充：10px；
利润率：10px；
显示：内联块；
盒影：2PX2PX8PX3PX；
}
#奥格波斯特{
宽度：80%；
左边距：10%；
保证金权利：10%；
明确：两者皆有；
}
/*--页脚样式--*/
页脚{
溢出：自动；
明确：两者皆有；
背景：#222；
}
页脚h1{
浮动：左；
文本对齐：居中；
宽度：20%；
填充物：5px；
保证金：5px；
}
页脚文章{
宽度：10%；
边界：无；
显示：内联块；
浮动：对；
盒影：无；
}
页脚a{
文字装饰：无；
颜色：#DDD；
}
页脚ul{
列表样式：无；
文本对齐：左对齐；
字体大小：12px；
左侧填充：0；
}
#cpyrt{
明确：两者皆有；
背景：#010101；
颜色：#666；
框大小：边框框；
宽度：100%；
左边距：0；
右边距：0；
}
#cpyrt ul{
显示：内联块；
字体大小：14px；
填充物：5px；
}


地牢伙计
地牢
伙计们

如果没有一些编码就不清楚，请尝试添加您的代码，以便我们能够理解您想要的内容。如果不包括HTML结构或其他影响它的CSS，我们真的无法回答这个问题。你的问题包括问题本身的代码，而不仅仅是代码的图像。添加了代码。这很有效！非常感谢你。我从未听说过“框大小”属性，因此我自己也不会想到这一点。@user10230670通常，此样式将为所有元素（而不是每个元素）全局设置，因为它是首选的大小计算方法。这是在许多css重置和框架（如引导）样式表中完成的：

*{box size:border box；}

，其中

以页面上的每个元素为目标。请注意，如果您现在这样做，它可能会打乱您的布局，因为您已经为

内容框

设置了样式。

<!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>

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

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