使用浮动将元素放在带有CSS的右侧
使用浮动将元素放在带有CSS的右侧
提问于 2018-07-10 05:18:33
我正在尝试做一个导航栏，在页面的右边贴上一个联系按钮。我希望contact与导航栏的其他元素对齐，但是当我添加float: right;时，它只会使导航栏不对齐，并且不会将contact移到右侧。
在这里您可以看到我的代码：http://jsfiddle.net/LG2vR/19/
有人能告诉我完成这件事的正确方法吗？
谢谢!
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-07-10 05:36:01
我不确定这是否是你所需要的，请看更新的fiddle http://jsfiddle.net/ov74xcyg/1/，基本上，我已经使用绝对位置将导航的最后一个子项移动到右侧，并增加导航的宽度，直到标题的末尾。
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
z-index: 500;
box-sizing: content-box;
transition: .3s;
background: red;
}
nav.white {
background: white;
height: 35px;
padding: 10px 100px;
transition: .5s;
}
nav ul {
list-style: none;
float: left;
margin: 0;
padding: 0;
display: flex;
width: 90%;
position: relative;
}
nav ul li {
list-style: none;
}
nav ul li:last-child {
display: inline-block;
right: 5%;
position: absolute;
top: 0;
}
nav ul li a {
line-height: 80px;
color: #FFFFFF;
margin: 12px 30px;
text-decoration: none;
text-transform: capitalize;
transition: .5s;
padding: 10px 5px;
font-size: 16px;
}
nav ul li a:hover {
background-color: rgba(255,255,255,0.2);
}
nav.white ul li a {
color: #000;
line-height: 40px;
transition: .5s;
}
nav ul li a:focus {
outline: none;
} <div class="wrapper">
<nav>
<ul>
<li><a href="#">LOGO</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a class="contact" href="#">Contact</a></li>
</ul>
</nav>
Stack Overflow用户
发布于 2018-07-10 05:22:23
只需添加：
nav ul li a {
float: left;
}在此之前：
nav ul li a.contact {
float: right;
}或者使用flexbox！
Stack Overflow用户
发布于 2018-07-10 05:46:34
.wrapper li {list-style-type: none;}
.wrapper {
overflow: hidden;
background-color: red;
}
.wrapper .logo{
margin-right : 30px;
}
.wrapper a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.wrapper a:hover {
background-color: #ddd;
color: black;
}
.wrapper a.active {
background-color: #4CAF50;
color: white;
}
.topnav-right {
float: right;
}<div class="wrapper">
<a class="active logo" href="#">Logo</a>
<a href="#">Home</a>
<a href="#">Page 1</a>
<a href="#">Page 2</a>
<div class="topnav-right">
<li><a class="contact" href="#">Contact</a></li>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51254172
复制相关文章
相似问题