http://jsfiddle.net/rctdzdsm/
我正在尝试将菜单与徽标对齐。
我是否必须手动边距，直到我正确对齐？
或者有更好/合适的方法吗？
因为手动边距直到我正确对齐，感觉有点愚蠢。
* {
margin: 0;
padding: 0;
}
header {
background-color: #e58b1a;
}
header .logo {
float: left;
width: 400px;
height: 53px;
font-family: 'Arial';
color: white;
font-size: 50px;
position: relative;
top: 20px;
left: 50px;
}
.menu {
float: right;
font-family: arial;
}
.menu li {
/** Float to the left, helps it become horizontal */
float: left;
/** Marigin-right allows you to space your links */
margin-right: 30px;
}<header class="show-when-loaded" style="height: 108px;">
<div class="logo">
<span class="text"> Daz Me Lulz </span>
</div>
<div class="menu">
<nav>
<ul>
<li> <a href="aboutus.html">About Us </a>
</li>
<li> <a href="project.html">Projectos De Lulz </a>
</li>
<li> <a href="involved.html">Get Involved </a>
</li>
</ul>
</nav>
</div>
</header>这不是一种非常灵活的方法。如果收割台的高度发生变化怎么办？
然后你必须手动对齐你的填充和边距。如果您正在寻找更准确的方法，请查看显示元素和对齐元素的不同可能性。即使您的菜单位于无序列表中。把你的列表想象成一个表格，把列表项想象成表格单元格。如果你的元素继承了你的标题的高度，你可以很容易地在在中间垂直对齐它们。这里有一个片段，让你了解我的意思。
html, body {
margin: 0;
padding: 0;
}
header {
height: 108px;
background-color: orange;
}
header:after {
clear: both;
}
nav {
height: 100%;
}
nav ul {
margin: 0;
padding: 0;
float: left;
display: table;
height: inherit;
}
nav li {
display: table-cell;
height: inherit;
vertical-align: middle;
}
nav a {
text-decoration: none;
color: white;
font-family: 'Arial';
}
.logo a {
font-size: 50px;
padding: 0 0 0 20px;
}
nav .nav-bar {
float: right;
}
nav .nav-bar li {
padding-right: 20px;
}<header>
<nav role='navigation'>
<ul class="logo">
<li>
<a href="">Daz Me Lulz</a>
</li>
</ul>
<ul class="nav-bar">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>玩得开心。
我删除了位置：relative。因为它不需要
添加了一些边距以便更好地对齐。尝试使li元素进行包装，但最终得到了无包装的解决方案
使链接的文本方向从右向左。所以它们粘在屏幕的右侧，而不会像float:right那样破坏流动。
html, body {
margin: 0;
padding: 0;
}
header {
white-space: nowrap;
background-color: #e58b1a;
min-width: 650px;
}
header .logo {
display: inline-block;
font-family: 'Arial';
color: white;
font-size: 50px;
padding: 20px 0px 20px 20px;
}
.menu {
display: inline-block;
direction: rtl;
font-family: arial;
min-width: 350px;
width: calc(100% - 350px);
margin-top: 40px;
}
.menu ul {
display: inline;
direction: rtl;
padding: 0;
}
.menu ul li {
display: inline;
list-style: none;
margin-right: 10px;
}<header class="show-when-loaded">
<div class="logo">
<span class="text"> Daz Me Lulz </span>
</div>
<nav class="menu">
<ul>
<li> <a href="aboutus.html">About Us </a>
</li>
<li> <a href="project.html">Projectos De Lulz </a>
</li>
<li> <a href="involved.html">Get Involved </a>
</li>
</ul>
</nav>
</header>看起来CSS表在这里会有所帮助。
header {
background-color: #e58b1a;
display: table;
vertical-align: middle;
width: 100%;
}
header .logo {
display: table-cell;
height: 53px;
font-family: 'Arial';
color: white;
font-size: 50px;
vertical-align: middle;
}
.menu {
display: table-cell;
font-family: arial;
text-align: right;
vertical-align: middle;
}
* {
margin: 0;
padding: 0;
}
header {
background-color: #e58b1a;
display: table;
vertical-align: middle;
width: 100%;
}
header .logo {
display: table-cell;
height: 53px;
font-family: 'Arial';
color: white;
font-size: 50px;
vertical-align: middle;
}
.menu {
display: table-cell;
font-family: arial;
text-align: right;
vertical-align: middle;
}
.menu li {
display: inline-block;
}<link rel="stylesheet" type="text/css" href="style.css">
<title>Daz Me Lulz - Providng Renewable Energy to the children of Latin America</title>
<body>
<header class="show-when-loaded" style="height: 108px;">
<div class="logo">
<span class="text"> Daz Me Lulz </span>
</div>
<div class="menu">
<nav>
<ul>
<li> <a href="aboutus.html">About Us </a>
</li>
<li> <a href="project.html">Projectos De Lulz </a>
</li>
<li> <a href="involved.html">Get Involved </a>
</li>
</ul>
</nav>
</div>
</header>
</body>