Question

CASE：我想要一个'主菜单div'。所有这些需求都是左侧的徽标和右侧的水平导航栏。

.mainmenu {
	
}

#logo {
	float:left;
}

.menu {
    float:right;
	text-align:right;
}

.menu ul {
	list-style: none;
  	padding:0;
	margin:0;
}

.menu ul li {
	display:inline;
	padding:1em;
}

<div class="mainmenu clearFix">	

		<div id="logo">
			<a href="home.html"><img src="img/logo.png"></a>
		</div>
		
		<div class="menu">
			<nav>
				<ul>
				  <li><a href="wat.html">What</a></li>
				  <li><a href="who.html">Who</a></li>
				  <li><a href="contact.html">Contact</a></li>
				</ul>
			</nav>	
		</div>
		
	</div>

问题：由于浮动，导航栏位于右上角：右侧;但我希望它在右下角，与徽标的底部对齐。

问题：我怎么能以最简单的方式做到这一点？

谢谢

Answer 1

我希望您使用Position:relative和top

以下是演示http://jsfiddle.net/8nnwytbL/318/

Answer 2

因为您希望导航栏位于徽标的右下角。你需要做的就是清除第一个浮动

.mainmenu {
}
#logo { float:left;
 }
.menu {
    float:right;
    text-align:right;
}
.menu ul {
    list-style: none;
    padding:0;
    margin:0;
}
.menu ul li {
    display:inline;
    padding:1em;
}
div.clear {
    clear:both; 
}

div class =＆＃34; mainmenu clearFix＆＃34;＆gt;

    <div id="logo">
        <a href="home.html"><img src="img/logo.png"></a>
    </div>
    <div class="clear"></div>

    <div class="menu">
        <nav>
            <ul>
              <li><a href="wat.html">What</a></li>
              <li><a href="who.html">Who</a></li>
              <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>  
    </div>

</div>

对齐img（浮动：左）和导航（右：浮动）的底部

2 个答案: