我正在利用业余时间制作自己的网站。我希望在页面上有三列文本，但是我无法摆脱中间文本列上方的空白区域。此外，我无法将文本换行到右栏(当我添加更多文本时)，因此我不得不制作单独的 p 标签，这会在文本之间留下不需要的空间。
这是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first webpage</title>
<style>
.outer {
width: 1410px;
color: navy;
background-color: pink;
border: 2px solid darkblue;
padding: 5px;
}
.b {
text-align: left;
float: left;
}
.n {
text-align: right;
float: right:
}
.c {
margin-left: 505px;
margin-right: 505px;
}
.s {
text-align: center;
}
</style>
</head>
<body>
<div class="outer">
<h1 class="s">Thank you for visiting my webpage!</h1>
</div>
<nav class="b">
<h1>My Favorite Websites</h1>
<ul>
<li><a href="http://www.youtube.com/">YouTube</a></li>
<li><a href="http://www.google.com/">Google</a></li>
<li><a href="http://www.reddit.com/">Reddit</a></li>
<li><a href="http://www.gamebuino.com/">Gamebuino</a></li>
<li><a href="http://www.netflix.com/">Netflix</a></li>
<li><a href="http://www.twitch.tv/">Twitch</a></li>
<li><a href="http://www.amazon.com/">Amazon</a></li>
<li><a href="http://www.ebay.com/">Ebay</a></li>
</ul>
</nav>
<article class="n">
<h1>ABC</h1>
<p>123</p>
<p>do re mi</p>
<p>xyz</p>
<p>easy as</p>
<p>456</p>
<p>hello world</p>
</article>
<article class="c">
<h2>The Official Homepage of Ian Witkowski</h2>
<dl>
<dt><h3>Ian Witkowski</h3></dt>
<dd>A cool dude</dd>
</dl>
<p>Reasons Ian is cool;</p>
<ul>
<li>He is nice</li>
<li>He rides bikes</li>
<li>He likes computers</li>
<li>He can code his own website</li>
</ul>
<p>Here is a link for my arbitrary code test page;</p>
<ul>
<li><a href="secondpage.htm" target="_blank">Ian2</a></li>
</ul>
</article>
</body>
</html>最佳答案
你只是有一个错字:
.n {
text-align: right;
float: right: /* <- */
}
这里;需要加分号。
一般来说，请确保您的标记和 CSS 是有效的。
.outer {
width: 1410px;
color: navy;
background-color: pink;
border: 2px solid darkblue;
padding: 5px;
}
.b {
text-align: left;
float: left;
}
.n {
text-align: right;
float: right;
}
.c {
margin-left: 505px;
margin-right: 505px;
}<div class="outer">
<h1 class="s">Thank you for visiting my webpage!</h1>
</div>
<nav class="b">
<h1>My Favorite Websites</h1>
<ul>
<li><a href="http://www.youtube.com/">YouTube</a></li>
<li><a href="http://www.google.com/">Google</a></li>
<li><a href="http://www.reddit.com/">Reddit</a></li>
<li><a href="http://www.gamebuino.com/">Gamebuino</a></li>
<li><a href="http://www.netflix.com/">Netflix</a></li>
<li><a href="http://www.twitch.tv/">Twitch</a></li>
<li><a href="http://www.amazon.com/">Amazon</a></li>
<li><a href="http://www.ebay.com/">Ebay</a></li>
</ul>
</nav>
<article class="n">
<h1>ABC</h1>
<p>123</p>
<p>do re mi</p>
<p>xyz</p>
<p>easy as</p>
<p>456</p>
<p>hello world</p>
</article>
<article class="c">
<h2>The Official Homepage of Ian Witkowski</h2>
<dl>
<dt><h3>Ian Witkowski</h3></dt>
<dd>A cool dude</dd>
</dl>
<p>Reasons Ian is cool;</p>
<ul>
<li>He is nice</li>
<li>He rides bikes</li>
<li>He likes computers</li>
<li>He can code his own website</li>
</ul>
<p>Here is a link for my arbitrary code test page;</p>
<ul>
<li><a href="secondpage.htm" target="_blank">Ian2</a></li>
</ul>
</article>关于css - 在单独的列中文本换行问题 html5，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45826553/