Question

我正在创建一个包含两个部分的导航栏，一个是小顶部，另一个是底部，它们都有浮动图标，但它们之间有一个小空间。它们之间只有很小的差距。我不确定为什么，感谢任何帮助。我也在使用bootstrap，但导航栏都不是bootstrap。

＆＃13;

header div.nav {
  background-color: #fff;
}

header div.top-nav {
  overflow: hidden;
}

header div.top-nav div.info {
  background-color: #f1f1f1;
  width: 100%;
  display: inline-block;
}

header div.info div.contact {
  float: left;
}

header div.top-nav div.contact a {
  padding: 3px 16px;
  display: inline-block;
}

header div.info div.social {
  float: right;
}

header div.top-nav div.social a {
  color: #333;
}

header div.top-nav div.social a i {
  padding: 8px 16px;
}

header div.top-nav div.social a i:hover {
  color: #6b6b6b;
  transition: 0.5s;
}

header div.nav div.brand {
  float: left;
}

header div.nav div.links {
  float: right;
}

header div.nav div.brand a {
  display: block;
  color: #f07e0b;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

header div.nav div.brand a:hover {
  display: block;
  color: #ffc863;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  display: block;
  color: #333;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

＆＃13;

<header>
  <div class="top-nav">
    <div class="info">
      <div class="container">
        <div class="contact">
          <a>hello@arriveradio.com</a>
        </div>
        <div class="social">
          <a href="https://twitter.com/radioarrive"><i class="fa fa-twitter-square"></i></a>
        </div>
      </div>
    </div>
  </div>
  <div class="nav">
    <div class="container">
      <div class="brand">
        <a>ArriveRadio</a>
      </div>
      <div class="links">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">News</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">About</a></li>
        </ul>
      </div>
    </div>
  </div>
</header>

＆＃13;

Answer 1

如果在顶部导航和底部周围放置1px边框，则可以看到缺少的区域是由顶部div未填充父级高度的100％引起的。

通过删除将<div class="info">设置为内联块的样式，您将删除此小空间。

header div.top-nav div.info {
    background-color: #f1f1f1;
    width: 100%;
    /* display: inline-block; */
}

/* header div.nav {
    background-color: #fff;
} */

header div.top-nav {
    overflow: hidden;
    border: solid 1px;
}

header div.top-nav div.info {
    background-color: #f1f1f1;
    width: 100%;
    /* display: inline-block; */
}

header div.info div.contact {
    float: left;
}

header div.top-nav div.contact a {
    padding: 3px 16px;
    display: inline-block;
}

header div.info div.social {
    float: right;
}

header div.top-nav div.social a {
    color: #333;
}

header div.top-nav div.social a i {
    padding: 8px 16px;
}

header div.top-nav div.social a i:hover {
    color: #6b6b6b;
    transition: 0.5s;
}

.nav {
border: solid 1px;
}
header div.nav div.brand {
    float: left;
}

header div.nav div.links {
    float: right;
}

header div.nav div.brand a {
    display: block;
    color: #f07e0b;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

header div.nav div.brand a:hover {
    display: block;
    color: #ffc863;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;

}

li {
    float: left;
}

li a {
    display: block;
    color: #333;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

 <header>
  <div class="top-nav">
            <div class="info">
                <div class="container">
                    <div class="contact">
                        <a>hello@arriveradio.com</a>
                    </div>
                    <div class="social">
                        <a href="https://twitter.com/radioarrive"><i class="fa fa-twitter-square"></i></a>
                    </div>
                </div>
            </div>
        </div>
  
        <div class="nav">
            <div class="container">
                <div class="brand">
                    <a>ArriveRadio</a>
                </div>
                <div class="links">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">News</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">About</a></li>
                    </ul>
                </div>
            </div>
        </div>
  </header>

Answer 2

这是一个jsfiddle：https://jsfiddle.net/45v15kjr/

header div.top-nav div.info {
    background-color: #f1f1f1;
    width: 100%;
    display: block; /* this is part of the issue */
}

还有一些容器需要clearfixes。

两个div之间的差距与浮动项目

2 个答案: