晚上好。下面的代码用于我网站上的导航栏。这两个无序列表目前并排(内联)，这正是我想要的。但是，我希望第二个坐在右边。我知道有几种方法可以实现这一目标。我的问题是针对这种方法的，因为我不明白为什么会这样。为什么，如果我将以下代码添加到我的样式表 (.float { float: right })，第二个向右移动，但不与第一个保持“内联”；它显示的水平略有不同？我不明白为什么会这样。有人愿意解释一下吗？
其次，如果我向每个无序列表添加一个不同的类并将一个向右浮动一个向左浮动，同时删除 CSS ( .nav ul {display: inline; )，我不明白为什么会这样他们坐在一起“在线”？是什么在指示他们这样做？ float: right 指令如何指示元素在左侧的元素之外向上移动？非常感谢 显示:内联；
http://jsfiddle.net/mugman/rnmht1y2/
<body>
<div class="nav">
<div class="container">
<ul>
<li><a href="#">Name</a></li>
<li><a href="#">Browse</a></li>
</ul>
<ul class="float">
<li><a href="#">Sign Up</a></li>
<li><a href="#">Log In</a></li>
<li><a href="#">Help</a></li>
</ul>
<style>
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.nav ul {
display: inline;
}
最佳答案
当元素的 display CSS 属性的计算值为:inline、inline-block 或 inline-table 时，该元素被称为内联级。从视觉上看，它不构成内容 block ，而是与其他内联级内容一起分布。通常，段落的内容是文本，具有不同的格式，如强调或图像，由行内元素组成。 (来自:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model)
如果您将 inline-block 应用到您的“nav ul”，您的元素将内联显示。
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.nav ul {
display: inline-block;
}
.float {
float: right;
}<!DOCTYPE html>
<body>
<div class="nav">
<div class="container">
<ul>
<li><a href="#">Name</a></li>
<li><a href="#">Browse</a></li>
</ul>
<ul class="float">
<li><a href="#">Sign Up</a></li>
<li><a href="#">Log In</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>关于html - CSS 样式对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30717815/