Question

我似乎无法弄清楚为什么当我将标题设置为宽度100％时它会通过右侧2％。我看了一遍，所有的修复似乎都不够。我已经将主体和html填充和边距设置为0，并且当它将标题设置为100％时仍然向右移动2％，因此我必须将标题设置为98％，因此它完全从左到右。这是一个显示我的意思的jsfiddle。

副问题（我可以发一个新帖子） - 由于某种原因导航不在标题内...（如果我移除浮动然后它居中）

更改css代码中的第18行。

https://jsfiddle.net/RVKuzmik/zbgsmdzk/

code

html,
body {
  padding: 0;
  margin: 0 auto;
  text-align: center;
  background-color: #ffffff;
  width: 100%;
}

body {
  margin: 0;
}


/*Navigation bar*/

header {
  width: 98%;
  padding: 1%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul li {
  display: inline-block;
  padding: 0 1% 0 1%;
  margin: 0;
}

ul li a {
  position: relative;
  padding: 0;
  font-size: 150%;
  text-decoration: none;
  margin: 1%;
  color: black;
}

nav ul li:first-child {
  float: left;
}

nav ul li:last-child {
  float: right;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Bob">
    <!--I have a normalize.css here-->
    <!--CSS STYLE SHEET HERE-->
    <title>HomeC</title>
  </head>

  <body>
    <header>
      <nav>
        <ul>
          <li><a id="testbtn" href="test.php">test</a></li>
          <li><a id="testtwobtn" href="testtwo.php">test</a></li>
        </ul>
      </nav>
    </header>
  </body>

</html>

Answer 1

默认情况下，CSS在应用任何边框或填充之前，仅将元素width定义为内容的宽度。大多数用户在你的情况下发现这种笨拙，知道带有填充和边框的元素的总宽度是很好的。

对此的修复是box-sizing属性，设置为border-box。对于我正在处理的任何项目，我将其设置为任何元素的默认值：

* {
  box-sizing: border-box;
}

文档：MDN

一旦你有了这个，你就可以做到：

header {
  width: 100%;
  padding: 1%;
}

因此，您可以将标题的填充更改为您喜欢的任何内容，并且无论如何，您都知道宽度将保持在100％。

Answer 2

您可以使用*{ box-sizing: border-box;}

这通常被称为“通用盒子大小”，这是一种很好的工作方式！您设置的（文字）宽度是您获得的宽度，无需执行心算和管理来自多个属性的宽度的复杂性。

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

https://jsfiddle.net/zbgsmdzk/6/

Answer 3

感谢@disinfor

问题在于，当我需要填充顶部为1％时，我已将标头填充设置为1％。

谢谢！

为什么我的屏幕宽度超过100％？

3 个答案: