如何将 font awesome 搜索图标 float 到右侧以进行注册。
这是我的导航栏的截图,所以你也知道我指的是什么:
我在网上搜索教程,他们都说要使用 float: right;但这似乎不起作用
body {
margin: 0;
padding: 0;
margin-top: 130px;
overflow-x: hidden;
}
.nav-menu a img {
float: left;
margin-left: 10px;
}
.nav-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.9);
margin-top: -130px;
}
.nav-menu li {
float: left;
}
.nav-menu li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-menu li a:hover,
.dropdown:hover .dropbtn {
border-top: 2px solid #ff0000;
}
.nav-menu li.dropdown {
display: inline-block;
}
.nav-menu .dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.nav-menu .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.nav-menu .dropdown-content a:hover {
background-color: #ff0000;
color: #fff;
}
.nav-menu .dropdown:hover .dropdown-content {
display: block;
}
.nav-menu li.social {
float: right;
}
<div class="nav-menu">
<ul>
<a href="#"><img src="img/logo.jpg" style="width:50px"></a>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Games</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Crews</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">News</a></li>
<li class="social">
<a href="#">Sign In</a>
<a href="#" style="color:#ff0000">Sign Up</a>
<li><a href="#"><i class="fas fa-search"></i></li></a>
</ul>
最佳答案
问题是你的<li>
包装搜索图标。这是无效代码。 <li>
不能是 <li>
的 child .将其更改为 <a>
元素
body {
margin: 0;
padding: 0;
margin-top: 130px;
overflow-x: hidden;
}
.nav-menu a img {
float: left;
margin-left: 10px;
}
.nav-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.9);
margin-top: -130px;
}
.nav-menu li {
float: left;
}
.nav-menu li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-menu li a:hover,
.dropdown:hover .dropbtn {
border-top: 2px solid #ff0000;
}
.nav-menu li.dropdown {
display: inline-block;
}
.nav-menu .dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.nav-menu .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.nav-menu .dropdown-content a:hover {
background-color: #ff0000;
color: #fff;
}
.nav-menu .dropdown:hover .dropdown-content {
display: block;
}
.nav-menu li.social {
float: right;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div class="nav-menu">
<ul>
<li><a href="#"><img src="img/logo.jpg" style="width:50px"></a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Games</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Crews</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">News</a></li>
<li class="social">
<a href="#">Sign In</a>
<a href="#" style="color:#ff0000">Sign Up</a>
<a href="#"><i class="fas fa-search"></i></a>
</li>
</ul>
</div>
关于html - 如何将搜索图标 float 到右侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55463455/