我有一个菜单,我希望最后三个选项(Facebook/Twitter/Gail的一些图像)向右对齐。到目前为止,我尝试过:
li:last-child { float:right;}
-将3个图像组合在一起,以获得右侧的最后一个选项,但即使如此,
float: right;
也不起作用-与上面的
text-align: right;
结果相同-没有改变
#nav {
background-color: #e26a63;
padding: 0;
margin: 0;
font-family: FONT;
font-size: 20px;
}
#wrap {
padding-left: 60px;
height: 100px;
width: 100%;
margin: 0 auto;
display: table-cell;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 225px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #cb5f59;
}
#nav ul li:after {
content: "";
font-size: 0;
display: block;
height: 5px;
}
#nav ul li:hover:after {
background: #9e4a45;
}
#nav ul ul li:hover:after {
background: transparent;
}
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-top: 5px;
z-index: 10;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
<div id="nav">
<div id="wrap">
<ul>
<li><a href="home.html">Home</a></li><li>
<a href="#">Study</a></li><li>
<a href="#">Games</a>
<ul>
<li><a href="#">Riddles</a></li><li>
<a href="#">Flip card game</a></li><li>
<a href="#">Spot the mistake</a></li><li>
<a href="#">Multiple choice</a></li>
</ul>
</li><li>
<a href="read.html">Read</a></li><li>
<a href="contact.html">Contact</a></li><li>
<a href="about.html">About Us</a></li><li id="alignright">
FB
</li><li>
Twitter
</li><li style="text-align: right;">
Gmail
</li>
</ul>
</div>
</div>
Flexbox可以做到这一点:
JSfiddle演示
#nav {
background-color: #e26a63;
padding: 0;
margin: 0;
font-family: FONT;
font-size: 20px;
}
#wrap {
height: 100px;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
display: flex;
align-items: center;
}
#nav ul li {} #nav ul li:hover {
background-color: #cb5f59;
}
#nav ul li:after {
content: "";
font-size: 0;
display: block;
height: 5px;
}
#nav ul li:hover:after {
background: #9e4a45;
}
#nav ul ul li:hover:after {
background: transparent;
}
#nav ul li a {
color: white;
display: block;
padding: .5em;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-top: 5px;
z-index: 10;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
#alignright {
margin-left: auto;
}
<div id="nav">
<div id="wrap">
<ul>
<li><a href="home.html">Home</a>
</li>
<li>
<a href="#">Study</a>
</li>
<li>
<a href="#">Games</a>
<ul>
<li><a href="#">Riddles</a>
</li>
<li>
<a href="#">Flip card game</a>
</li>
<li>
<a href="#">Spot the mistake</a>
</li>
<li>
<a href="#">Multiple choice</a>
</li>
</ul>
</li>
<li>
<a href="read.html">Read</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
<li>
<a href="about.html">About Us</a>
</li>
<li id="alignright">
FB
</li>
<li>
Twitter
</li>
<li style="text-align: right;">
Gmail
</li>
</ul>
</div>
</div>
首先:
#nav {
display: table;
width: 100%;
}
.alignright { float: right; }