由于某种原因,我无法获得正确的菜单以向右浮动,这是一个水平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>

09-10 10:53
查看更多