我在使用 HTML、CSS 和 JavaScript 创建两行导航栏时遇到问题。
我的 HTML:
<div id="top-bar">
<div class="container">
<ul>
<li><a href="#"><i class="fab fa-facebook"></i> <i class="fab fa-twitter"></i> <i class="fab fa-instagram"></i></a> </li>
<li style="padding:0;"><a href="#" style="position: absolute; z-index:1; top:0;"><img src="https://via.placeholder.com/250x115" alt="" width="100%"></a>
<li><a href="#">01283 575 671</a></li>
<li><a href="#">Join Now </a></li>
</ul>
</div>
</div>
<div class="nav-bg">
<div class="container">
<ul id="nav">
<li><a href="#" class="nav_first">Facilties</a></li>
<li><a href="#">Timetable</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#" class="nav_blank"></a></li>
<li><a href="#">The Team</a></li>
<li><a href="#">Events</a></li>
<li><a href="#" class="nav_last">Contact Us</a></li>
</ul>
</div>
</div>
我的 CSS:
* { box-sizing:border-box }
body {
margin: 0px;
font-family: 'Montserrat', sans-serif;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
#top-bar {
float: left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 0px;
overflow: hidden;
width:100%;
min-width: 650px;
min-height: 50px;
background: #FFDE00;
}
#top-bar div ul {
margin:0;
padding:0;
list-style:none;
}
#top-bar div ul li {
float:left;
padding: 15px 15px;
width: 20%;
background: #FFDE00;
font-weight:500;
text-transform:uppercase;
}
#top-bar div ul li:first-child{
width:40%;
}
#top-bar div ul li:last-child{
background:#081F2D;
}
#top-bar div ul li a {
display: block;
color:#081F2D;
text-decoration:none;
text-align: center;
font-size:17px;
}
#top-bar > div > ul > li:nth-child(4) > a{
color:#FFDE00;
}
#nav {
text-align: justify;
min-width: 500px;
font-size: 0;
padding-left:0;
}
.nav-bg{
background-color: #EEEEEE;
}
#nav:after {
content: '';
display: inline-block;
width: 100%;
}
#nav li {
display: inline-block;
background-color: #ccc;
}
#nav a {
padding: 15px 40px;
display: block;
font-size: 1rem;
text-align: center;
color:#081F2D;
text-transform:uppercase;
font-weight:600;
text-decoration: none;
background-color: #EEEEEE;
}
#nav .nav_blank { width: 250px; padding: 15px 0; }
#nav .nav_first { padding-left: 0; }
#nav .nav_last { padding-right: 0; }
我的问题的代码笔是 https://codepen.io/mrsalami/pen/VEyXVJ
最佳答案
通过实现 CSS-Grids 重做您的结构
CSS 部分:
#parent_column
{
grid-template-columns:1fr 0.61fr 1fr;
display: grid;
width: 100vw;
height: 20vh;
}
#first_column
{
grid-column: 1;
display:grid;
grid-template-rows: 1fr 1fr;
}
#second_column
{
grid-column: 2;
}
#third_column
{
grid-column: 3;
display:grid;
grid-template-rows: 1fr 1fr;
}
HTML 为
<div id="parent_column">
<div id="first_column">
<div style="background-color: rebeccapurple;">Top Bar Content on Left</div>
<div style="background-color: gold;">Bottom Bar Content on Left</div>
</div>
<div id="second_column">
<a href="#" style="position: absolute; z-index:1; top:0;"><img src="https://via.placeholder.com/250x115" alt=""
width="100%"></a>
</div>
<div id="third_column">
<div style="background-color: red;">Top Bar Content on Left</div>
<div style="background-color: pink">Bottom Bar Content on Left</div>
</div>
</div>
结果: 现在 87.85% 的浏览器都支持 CSS-Grid,对于 IE 浏览器,您需要添加前缀 ms-
更多浏览器引用support on CSS Grid
关于html - 如何创建中间带有 Logo 的两行导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52894919/