所以，我有这段代码。我试图将类 navLogo 和 navUl 对齐在同一行中，但我无法做到这一点。另一件事是我希望类 navUl 向右浮动。 这是 HTML
<!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;
}
非常感谢您的帮助。谢谢。
最佳答案
我不是 100% 确定这是否是您想要的，但是您在 navUL 类和 float:left; 上的宽度为 70%，所以我更改了向右浮动并将宽度设置为自动，并向 navUL 和 navLogo 添加 padding 以垂直对齐
这是一个Codepen http://codepen.io/noobskie/pen/wKBZqE
关于html - 修复 float 和 div 对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32419857/