所以我是 HTML/CSS 的新手，我一直在关注 Tutsplus 和 Treehouse 教程。为了获得练习，我在获取 HTML/CSS 知识的同时，一直在制作自己的随机主题模拟网站。但是，我遇到了障碍。我正在尝试使用 display:inline 进行水平导航 我自己进行了研究，并尝试了多种似乎针对我的问题的解决方案。我用过 float ，所以有人建议使用内联 block 或溢出。我不能说我对 overflow 或 blocks 的了解足够多，无法正确使用它。无论如何，我想让我的导航水平。我是新手，所以我会尽力附上代码。这是我的代码和/或代码笔链接:
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;
}
关于html - 内联导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21372463/