所以我是HTML/CSS的新手，并且我一直在关注Tutsplus和Treehouse教程。为了获得练习，我一直在一个随机主题上创建自己的模拟网站，因为我获得了有关HTML/CSS的知识。但是，我遇到了一个障碍。我正在尝试使用Display进行水平导航：内联我自己进行了研究，并尝试了多种似乎特定于我的问题的解决方案。我已经使用了浮子，因此建议使用内联块或溢出。我不能说我对溢出或块足够了解以适当使用它。无论如何，我想保持导航水平。我是新手，所以我会尽力附加代码。这是我的代码和/或codepen链接：
http://cdpn.io/pwbcq
html
<html>
<head>
<title>Tenkara Fishing</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrap">
<div class="heading">
<h1>Tenkara For Beginners</h1>
<p>Tenkara is the simple Japanese method of fly-fishing where only a <em>rod, line and fly</em> are used.</p>
</div>
<div class="nav">
<ul id="linksnav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Lessons</a></li>
<li><a href="#">Shop</a></li>
</ul>
</div>
<div class="content">
<h3 class="centeredtext">Important Terminology</h3>
<dl>
<dt class="definitions">Tenkara Fly</dt>
<dd>Made of mostly feather and thread, they place more emphasis on manipulation rather than imitation</dd>
<dt class="definitions">Tippet</dt>
<dd>It is the thin line that goes between the tenkara line and the fly. Prevents the fish from seeing a thicker line on the water.</dd>
</dl>
<br/>
<blockquote>"I can see a day when I hike into my favorite small stream with just my tenkara rod and a few flies. It's a fishing style designed to have as little between the angler, nature and the trout as possible. And that's what I'm after..." <strong>- Ed Engle</strong></blockquote>
<br/>
<img class="displayed" src="img/fish.png" alt="fish" />
</div>
<aside>
<h3>Resources</h3>
<ul>
<li>
<a href="http:///tenkarausa.com">Tenkara USA</a>
</li>
<li>
<a href="http://tenkararodco.com" target= "_blank">Tenkara Rod Co.</a>
</li>
<li>
<a href="http://tenkarabum.com">Tenkara Bum</a>
</li>
</ul>
</aside>
</div>
</body>
</html>
CSS
body {
background-color: #C0D9AF;
width: 600px;
margin: auto;
}
.wrap {
min-width: 80%;
width: 600px;
margin: auto;
overflow: hidden;
}
.heading {
text-align: center;
margin: auto;
}
a {
color: green;
text-decoration: none;
}
h1 {
color: #391600;
font-family: sans-serif;
}
.definitions {
font-style: italic;
font-weight: bold;
}
blockquote {
border: 2px solid green;
text-align: center;
}
.centeredtext {
text-align: center;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
aside {
float: left;
}
aside ul {
padding-left: 15px;
padding-right: 10px;
list-style-type: none;
}
aside h3 {
padding-left: 15px;
padding-right: 10px;
}
.content {
float: left;
width: 450px;
}
.nav ul {
display: inline;
list-style: none;
}
谢谢！
在您的实例中，您需要制作实际的li元素inline-block。似乎您尝试制作父，ul是inline元素。
.nav ul li {
display: inline-block;
}
更新示例此处