Question

我在#mainContainer和HTML-body之间得到了这个奇怪的黄色（！）行，但只在右侧但仅在header/nav-section之下。

发生在 Chrome 和 Firefox 。

修改我玩了很久之后就摆脱了黄线。不确定为什么，但它现在已经消失了。我已将代码放在此处以防有人遇到类似问题：

<!DOCTYPE html>
<html>

<head>
    <title>navbar</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div id="mainContainer">

        <header>
            <h1>Test Webseite</h1>
        </header>

        <nav>
            <ul id="menu">
                <li><a href="#">test1</a></li>
                <li><a href="#">test2</a></li>
                <li><a href="#">test3</a></li>
                <li><a href="#">test4</a></li>
                <li><a href="#">test5</a></li>
            </ul>
        </nav>

        <section>
            Lorem ipsum 
        </section>
    </div>
</body>

</html>

CSS：

html {
    height:100%;
    }
body {
    margin: 0 auto;
    padding: 0;
    font-family: sans-serif;
    background-color: #dedede;
    width:700px;
    height: 100%;
    }
#mainContainer {

    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    }

header {
    background: #00795f;
    width: 100%;
    padding: 40px 0;
    color: white;
    text-align: center;
}
nav ul {
    background: #424242;
    overflow: hidden;
    color: white;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 0;
}

nav ul li {
    display: inline-block;
    font-size: 16px;
}

nav ul li:hover {
    background-color: #399077;
}
ul li a {
    text-decoration: none;
    color: white;
    display: inline-block;
    padding: 12px 35px;
}
section {
    box-sizing: border-box;
    line-height: 1.7em;
    font-size: 0.9em;
    padding: 40px;
    width: 100%;
    min-height: 100%;
    margin: 0 auto;
    text-align: justify;
    text-justify: inter-word;

}

Answer 1

body {
  margin: 0 auto;
  font-family: sans-serif;
  background-color: #ddddaa;
}

header {
  background: #00795f;
  width: 100%;
  padding: 40px 0;
  color: white;
  text-align: center;
}

#mainContainer {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #D2D2D2;
}

ul li a {
  text-decoration: none;
  color: white;
  display: inline-block;
  padding: 12px 35px;
}

nav ul {
  background: #424242;
  overflow: hidden;
  color: white;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 0;
}

nav ul li {
  display: inline-block;
  font-size: 16px;
}

nav ul li:hover {
  background-color: #399077;
}

section {
  line-height: 1.7em;
  font-size: 0.9em;
  padding: 40px;
  width: 75%;
  margin: 0 auto;
  text-align: justify;
  text-justify: inter-word;
  background-color: #ffffff
}

<!DOCTYPE html>
<html>

<head>
  <title>navbar</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <header>
    <h1>Test Webseite</h1>
  </header>
  <div id="mainContainer">
    <nav>
      <ul id="menu">
        <li><a href="#">test1</a></li>
        <li><a href="#">test2</a></li>
        <li><a href="#">test3</a></li>
        <li><a href="#">test4</a></li>
        <li><a href="#">test5</a></li>
      </ul>
    </nav>

    <section>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime soluta incidunt ipsam, asperiores consequatur esse. Optio velit animi molestiae autem quas dignissimos architecto, blanditiis repellat rem nobis et adipisci perspiciatis quidem laudantium
      eaque corporis minima eos neque sapiente provident! Est, quod. Voluptates nisi hic vero deleniti neque veritatis facilis, nesciunt officiis? Laudantium vero autem, aspernatur consequatur! Ad assumenda, neque excepturi aut asperiores voluptatibus!
      Magni, saepe! Nisi laboriosam ea illo doloribus fugiat minus maiores! Magnam voluptatibus, deserunt aspernatur. Aperiam natus voluptatum libero magni? Tenetur quae optio, perferendis enim nesciunt quam inventore dolor necessitatibus, alias asperiores
      dolore. Hic perspiciatis quia laborum. Maxime porro eaque vero, laudantium blanditiis odio quam qui eius nulla consequatur doloremque quos optio minima recusandae laboriosam consectetur! Deserunt at expedita libero, alias quasi tempora dolores,
      doloremque illo eveniet aperiam facere totam molestias, eaque nihil odio consequatur esse. Ut eius facere vitae molestias optio, esse tenetur exercitationem facilis beatae, maiores nam! Dignissimos nulla ipsum a iure numquam ducimus aut ea nemo
      nihil, odit possimus magni dolor hic reiciendis exercitationem, error nesciunt dolorum eius, odio obcaecati consectetur repudiandae sapiente repellat omnis sunt! Quas ducimus at, nam laudantium. Architecto quas facere perferendis pariatur esse natus
      eligendi enim, doloremque nesciunt nulla. Vel, quasi.
    </section>
  </div>
</body>

</html>

我一直在疯狂地刺痛，我相信这是宽度属性。这是有效的，没有任何余地！运行代码段，看看它是否是你想要的！删除了宽度，最大宽度和填充。

编辑：如果你希望整个空白区域都是黄色，那么你的目标是错误的元素...你的主要容器显示一个白色背景只是改变那就是你想要的

edit2：我再次编辑它（希望）适合你想要的......

Answer 2

我现在改变了一些颜色。现在白色区域旁边的黄线消失了。但是在绿色标题区域的右侧有一条蓝线（如果仔细观察的话）！

有人指出，这可能是一种视错觉。他们可能是对的吗？我觉得有点难以置信。为什么它只是在右侧而不在左侧？

<!DOCTYPE html>
<html>
<head>
    <title>navbar</title>
    <link rel="stylesheet" type="text/css" href="style.css">    
</head>
<body>
<div id="mainContainer">
    <header>
        <h1>Test Webseite</h1>
    </header>

    <nav>
        <ul id="menu">
            <li><a href="#">test1</a></li>
            <li><a href="#">test2</a></li>
            <li><a href="#">test3</a></li>
            <li><a href="#">test4</a></li>
            <li><a href="#">test5</a></li>
        </ul>
    </nav>

    <section>
            Lorem ipsum 
    </section>
</div>
</body>
</html>

CSS：

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;    
    background-color: grey;
}
header{
    background: green;
    width:100%;
    padding: 40px 0;
    color: white;
    text-align: center;
}
#mainContainer {
    width: 95%;
    max-width: 850px;
    margin: 0 auto;
    padding: 0;
    background-color: #ffffff;
}
ul li a{
    text-decoration: none;
    color: white;
    display: inline-block;
    padding: 12px 35px;
}
nav ul{
    background: #424242;
    overflow: hidden;
    color: white;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size:0;
}
nav ul li{
    display: inline-block;
    font-size:16px;
}
nav ul li:hover{
    background-color: #399077;
}
section{
    line-height: 1.7em;
    font-size: 0.9em;
    padding: 40px;
    width: 75%;
    margin: 0 auto;
    text-align: justify;
    text-justify: inter-word;
}

Answer 3

我现在已经修好并编辑了第一篇文章！

html元素旁边的奇怪的黄色（！）行

3 个答案: