固定浮動和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對齊

回答

相關問題