html - 固定浮点和div对齐

因此，我有这段代码。我试图将类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％，所以我将浮点数更改为右侧，并自动将宽度设置为padding navUL和navLogo都可以垂直对齐

这是Codepen http://codepen.io/noobskie/pen/wKBZqE

关于html - 固定浮点和div对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32419857/

navul

html - 固定浮点和div对齐