html - 宽度 : 100% is not quite 100%

标签 html css

我已将一个元素的宽度设置为 100%,但边框并没有一直延伸到页面的边缘,它可能会在线条的每一侧留下两个像素的间隙。

这是我的 HTML:

<body>
    <div class="headerContainer">
    </div>
</body>

这是我的 CSS:

.headerContainer{
    border-bottom:black 2px solid;
    height:40px;
    width:100%;
    color:blue;
}

还有一个问题。我在浏览网站时遇到了这段代码:

<div class="navbar-wrapper">
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
        <h1 class="brand"><a href="#top">Legend!</a></h1>
        <nav class="pull-right nav-collapse collapse">
          <ul id="menu-main" class="nav">
            <li><a title="portfolio" href="#products">Out Products</a></li>
            <li><a title="services" href="#services">Services</a></li>
            <li><a title="news" href="#news">News</a></li>
            <li><a title="team" href="#team">Team</a></li>
            <li><a title="contact" href="#contact">Contact</a></li>
          </ul>
        </nav>
      </div>
      <!-- /.container -->
    </div>
    <!-- /.navbar-inner -->
  </div>
  <!-- /.navbar -->
    </div>

而且我想不出有任何理由拥有那么多 div 标签,难道一个——或者可能两个——行不通吗?

第三个问题:如果我在 div 标签中有一个 div 标签,我将如何在 CSS 中引用它?

最佳答案

body 元素有默认边距。添加这个:

body {
    margin:0;
}

你的空间消失了。

jsFiddle example

您的第二个问题没有真正的答案。该结构可能取决于许多因素。

最后,要使用 CSS 在 div 中引用 div,请使用 div div {...} 来定位父 div 的任何后代 div,或 div > div {.. . 专门针对另一个 div 的子 div。

关于html - 宽度 : 100% is not quite 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23279303/

相关文章:

javascript - 使用加载更多按钮将所选类循环到 ul > li

JavaScript:if 语句;对触摸元素的目标运行检查

html - 我如何制作图像的ajax uploader ?

html - 自定义组件注入(inject)表格行

html - 静态定位元素影响后续兄弟元素的绝对位置

javascript - 使用 Javascript 的 document.getElementByID 获取 div 的子元素

html - 每个部分的响应式背景图片

css - 将内部 div 在垂直、水平中心与父 div 对齐,不为以下跨度文本元素换行

css - 4 个盒子的相同代码,不同的输出

html - 为什么我的 Bootstrap 列是堆叠的而不是水平的