固定浮动和div对齐

所以，我有这段代码与我。我试图在同一行中对齐类navLogo和navUl，但我无法做到这一点。其他的事情是，我希望类NavUl漂浮在右边。下面是HTML固定浮动和div对齐

<!DOCTYPE html> 
<html lang="en"> 

<head> 
<title>Bookiro - Share books, thoughts and more..</title> 
<meta charset = "utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<link rel="stylesheet" type="text/css" href="lib/css/style.css"> 
</head> 

<body class="body"> 

<nav> 
<div class="navLogo"> 
    Bookiro 
</div> 

<div class="navUl"> 
    <ul> 
     <li><a href="">Features</a></li> 
     <li><a href="">Stories</a></li> 
     <li><a href="">About</a></li> 
     <li><a href="">Sign In</a></li> 
    </ul> 
</div> 
</nav> 
</body> 
</html>

这里CSS ..

body 
{ 
color: #000305; 
font-size: 100%; 
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
margin: 0; 
padding: 0; 
text-align: left; 
} 

a 
{ 
text-decoration: none; 
} 

.body 
{ 
clear: both; 
margin: 0 auto; 
width: 70%; 
} 

nav 
{ 
height: 50px; 
background-color: #666; 
} 

nav .navLogo 
{ 
width: 30%; 
float: left; 
} 

nav .navUl 
{ 
width: 70%; 
float: left; 
} 

nav ul 
{ 
list-style: none; 
} 

nav ul li 
{ 
display: inline; 
} 

nav ul li a 
{ 
display: inline-block; 
text-align: center; 
background-color: yellow; 
height: 40px; 
}

你的帮助是非常欢迎和好评。谢谢。

来源

2015-09-06 Kilvish Shakal

我不是100％肯定，如果这是你在想什么，但你不得不对navUL类的70％的宽度和float:left;所以我改变了浮动到右，由宽度自动以及添加padding既navUL和navLogo垂直对齐

这里是一个Codepenhttp://codepen.io/noobskie/pen/wKBZqE

来源

2015-09-06 04:01:15 NooBskie

这帮助。谢谢泰勒。 –

固定浮动和div对齐

回答

相关问题