Css 水平Div内部浮动问题

由于某些原因，我无法使右菜单向右浮动这是一个水平div菜单。图片和左边的链接都很完美。。右边不起作用，两个都在一个分区中

我希望它看起来像

徽标---link---link--link--link------------------日期和时间

#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>

#菜单{
高度：37像素；
背景色：#000；
边框底部：1px实心#1A1A；
字体系列：“Lato”，无衬线；
字体大小：11px；
字号：600；
文本转换：大写；
}
#左ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
}
#左李{
浮动：左；
}
#左李a{
显示：块；
颜色：#777777；
文本对齐：居中；
填充：9px 14px；
文字装饰：无；
}
#对{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
}
#对,李{
浮动：对；
}
#右李跨{
显示：块；
颜色：#777777；
文本对齐：居中；
填充：8px 14px；
文字装饰：无；
}
#菜单img{
边缘顶部：6px；
右边距：10px；
左边距：10px；
显示：内联块；
浮动：左；
高度：24px
}







日期和时间

我建议您查看flexbox:

这里是一个简单的黑客。我所做的是将右div添加到左div中，它成功了

<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>  
  <div id="right">
<ul>
   <li style="color:white">Date & Time</li>
</ul>
</div>

</ul>
</div>
</div>

---

您需要浮动块级元素，否则它们仍将占据100%的宽度。所以浮动

#左

和

#右

#菜单{
高度：37像素；
背景色：#000；
边框底部：1px实心#1A1A；
字体系列：“Lato”，无衬线；
字体大小：11px；
字号：600；
文本转换：大写；
}
#左ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
}
#左李{
}
#左李a{
显示：块；
颜色：#777777；
文本对齐：居中；
填充：9px 14px；
文字装饰：无；
}
#对{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
}
#对,李{
填充顶部：9px；
}
#右李跨{
显示：块；
颜色：#777777；
文本对齐：居中；
填充：8px 14px；
文字装饰：无；
}
#菜单img{
边缘顶部：6px；
右边距：10px；
左边距：10px；
显示：内联块；
浮动：左；
高度：24px
}
#左{
浮动：左；
}
#对{
浮动：对；
}
#菜单里{
显示：内联块；
}

日期和时间

您可以从中获得真正良好的理解。读一读D

/* align all direct child of menu, in same horizontal .... */
#menu > * {
  display: inline-block;
  color: #fff;
}

/* float the right component to right, and add a margin to top to bring all to same level */
#right {
    margin-top: 10px;
    overflow: hidden;
    float: right;
}

#菜单{
高度：37像素；
背景色：#000；
边框底部：1px实心#1A1A；
字体系列：“Lato”，无衬线；
字体大小：11px；
字号：600；
文本转换：大写；
边缘顶部：50px；
}
#菜单>*{
显示：内联块；
颜色：#fff；
}
#左ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
}
#左李{
浮动：左；
}
#左李a{
显示：块；
颜色：#777777；
文本对齐：居中；
填充：9px 14px；
文字装饰：无；
}
#对{
边缘顶部：10px；
溢出：隐藏；
浮动：对；
}
#对{
列表样式类型：无；
保证金：0；
填充：0；
}
#右李跨{
显示：块；
颜色：#777777；
文本对齐：居中；
填充：8px 14px；
文字装饰：无；
}
#菜单img{
边缘顶部：6px；
右边距：10px；
左边距：10px；
显示：内联块；
浮动：左；
高度：24px
}

日期和时间

/* align all direct child of menu, in same horizontal .... */
#menu > * {
  display: inline-block;
  color: #fff;
}

/* float the right component to right, and add a margin to top to bring all to same level */
#right {
    margin-top: 10px;
    overflow: hidden;
    float: right;
}