单独列中的文本换行问题 html5

Question

我正在利用业余时间制作自己的网站。我想在页面下方有三列文本运行，但是我无法摆脱中间文本列上方的空白 space。此外，我无法将文本换行到右栏（当我添加更多文本时），因此我不得不制作单独的 p 标签，在文本之间留下不需要的 space。

这是我的代码：

<!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>

Answer 1

你只是打错了：

.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>

单独列中的文本换行问题 html5

Text wrap issues in separate columns html5

html

css

nav