По какой-то причине я не могу получить правильное меню, чтобы плавать вправо, это горизонтальное меню div. изображение и левые ссылки идеальны .. право просто не работает, оба находятся в одном 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>

источник

2017-01-26 Case

Вы должны плавать ваши элементы уровня блока, в противном случае они будут по-прежнему занимают ширину 100%. Таким образом, float #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>

источник

2017-01-26 05:30:08

Я хотел бы предложить вам проверить Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

источник

2017-01-26 05:22:00 KaeyangTheG

Working Fiddle

Вот простой хак. То, что я сделал, добавляет ваш правый 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>

CSS

#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; 
    margin-top:10px; 
} 

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

источник

2017-01-26 05:28:43

Вы можете получить очень хорошее понимание от https://css-tricks.com/all-about-floats/. Дайте ему читать ..: 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; 
}

#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; 
 
    margin-top: 50px; 
 
} 
 

 
#menu > * { 
 
    display: inline-block; 
 
    color: #fff; 
 
} 
 

 
#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 { 
 
    margin-top: 10px; 
 
    overflow: hidden; 
 
    float: right; 
 
} 
 

 
#right ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#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"> 
 
\t <a href=""> 
 
\t \t <img src="logo.svg"> 
 
\t </a> 
 
\t <div id="left"> 
 
\t \t <ul> 
 
\t \t <li><a href="#">link1</a></li> 
 
\t \t <li><a href="#">link2</a></li> 
 
\t \t <li><a href="#">link3</a></li> 
 
\t \t <li><a href="#">link4</a></li> 
 
\t \t </ul> 
 
\t </div> 
 
    \t <div id="right"> 
 
\t \t <ul> 
 
\t \t <li>Date & Time</li> 
 
\t \t </ul> 
 
\t </div> 
 
</div>

источник

2017-01-26 05:39:30

Горизонтальный Div внутри поплавков

ответ

CSS

Смежные вопросы