问题描述
我只是无法正确放置导航栏。
这是它的图片以及我希望文本所在的位置:
这是它的 HTML 和 css-
<header>
<a href="index.html" class="logo"><img src="img.png" width="9%"></a>
<div class="mean-toggle"></div>
<nav>
<ul>
<li><a href="#">contact</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">something</a></li>
<li><a href="#">something</a></li>
<li><a href="#">something</a></li>
<li><a href="index.html">home</a></li>
</ul>
</nav>
<div class="clear"></div>
</header>
header {
position: relative;
max-width: 1450px;
max-height: 125px;
margin: auto;
background: rgb(255,255,255);
border-radius: 0px;
}
.logo {
float: left;
text-align: left;
padding: 0 20px;
color:#069370;
}
nav {
float: right;
}
.clear {
clear: both;
}
nav ul {
margin-top: 10px;
padding: 0px;
display: flex;
}
nav ul li {
list-style: none;
margin-top: auto;
}
nav ul li a {
display: block;
margin: 10px 0;
padding: 0px 20px;
text-decoration: none;
color: rgb(50,100,200);
font-family: 'Secular One',sans-serif;
}
nav ul li a.active,nav ul li a:hover {
background: rgb(200,50,100);
color: rgb(150,200,50);
transition: 1s;
}
我需要的只是获取导航栏中间的内容 但这是不可能的,所以如果你知道某种方式,请写信给我, 谢谢。
解决方法
如果您想以最佳方式执行此操作,请查找 flexbox,但如果您确实必须使用浮动,则请删除
nav {float:right;}
并将其替换为
nav {overflow:hidden;}
,
使用display:flex
或为 img 使用浮动左侧