Question

所以，我有这段代码。我试图将类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;
}

非常感谢你的帮助。谢谢。

Answer 1

我不是100％确定这是否是您想要的但是navUL类和float:left;的宽度为70％所以我将浮动更改为右边并使宽度自动为以及向padding和navUL添加navLogo以垂直对齐

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

修复浮动和div对齐

1 个答案: