Итак, я абсолютно не знаком с HTML/CSS, и я слежу за учебниками Tutsplus и Treehouse. Чтобы получить практику, я делаю свой собственный макет на случайной теме, поскольку получаю знания по HTML/CSS. Однако я ударил препятствие. Я пытаюсь сделать горизонтальную навигацию с помощью дисплея: inline Я провел исследование самостоятельно и попробовал несколько решений, которые, похоже, были связаны с моей проблемой. Я использовал float, поэтому некоторые предложили использовать inline-block или overflow. Я не могу сказать, что я достаточно разбираюсь в переполнении или блоках, чтобы правильно использовать его. Во всяком случае, я хотел бы сделать навигацию горизонтальной. Я новичок в этом, поэтому сделаю все возможное, чтобы прикрепить код. Вот мой код и/или codepen ссылка:Inline Navigation
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;
}
Спасибо!
Я предлагаю разместить код здесь; внешние ссылки, такие как коды, могут быть удалены и не будут полезны в будущем. –