0
2つのセクション、1つの小さい上の1つ、大きな下の1つのナビゲーションバーを作成していますが、どちらもアイコンが浮かんでいますが、それらの間には小さなスペースがあります。それらの間にはわずかな隙間しかありません。なぜ、何か助けに感謝しています。私はまた、ブートストラップを使用していますが、navbarのどれもブートストラップではありません。ここで浮動小数点数を持つ2つのdiv間のギャップ
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;
}<header>
<div class="top-nav">
<div class="info">
<div class="container">
<div class="contact">
<a>[email protected]</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>
？ – kauffee000