CSS

Question

出于某种原因，我无法让右侧菜单浮动，这是一个水平div菜单。图像和左侧链接都很完美..右侧不起作用，它们都在一个div中。

我希望它看起来像

logo --- link --- link - link - link ----------------------------- Date＆amp;时间

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

Answer 1

您需要浮动块级元素，否则它们仍然会占用100％的宽度。所以浮动#left和#right。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我建议您查看flexbox：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

您可以从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">
	<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>

Answer 4

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
}

水平Div内浮动问题

4 个答案:

CSS