由于某种原因,我无法获得正确的菜单以向右浮动,这是一个水平div菜单。图像和左边的链接是完美的..右边的行不通,它们都在一个div中。
我希望它看起来像
徽标---链接---链接-链接-链接-----------------------------日期和时间
#menu {
height: 37px;
background-color: #000;
border-bottom: 1px solid #1a1a1a;
font-family: 'Lato', sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
#left ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left li {
float: left;
}
#left li a {
display: block;
color: #777777;
text-align: center;
padding: 9px 14px;
text-decoration: none;
}
#right ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#right li {
float: right;
}
#right li span {
display: block;
color: #777777;
text-align: center;
padding: 8px 14px;
text-decoration: none;
}
#menu img{
margin-top: 6px;
margin-right: 10px;
margin-left: 10px;
display: inline-block;
float: left;
height: 24px
}
<div id="menu">
<a href=""><img src="logo.svg"></a>
<div id="left">
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</div>
<div id="right">
<ul>
<li>Date & Time</li>
</ul>
</div>
</div>
最佳答案
您需要浮动块级元素,否则它们仍将占用100%的宽度。因此,浮动#left
和#right
。
#menu {
height: 37px;
background-color: #000;
border-bottom: 1px solid #1a1a1a;
font-family: 'Lato', sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
#left ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left li {
}
#left li a {
display: block;
color: #777777;
text-align: center;
padding: 9px 14px;
text-decoration: none;
}
#right ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#right li {
padding-top: 9px;
}
#right li span {
display: block;
color: #777777;
text-align: center;
padding: 8px 14px;
text-decoration: none;
}
#menu img{
margin-top: 6px;
margin-right: 10px;
margin-left: 10px;
display: inline-block;
float: left;
height: 24px
}
#left {
float: left;
}
#right {
float: right;
}
#menu li {
display: inline-block;
}
<div id="menu">
<a href=""><img src="logo.svg"></a>
<div id="left">
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</div>
<div id="right">
<ul>
<li>Date & Time</li>
</ul>
</div>
</div>