如何使文本段落或列表并排排列

Question

在业余时间，我一直在 html 编写自己的主页。我试图让我最喜欢的网站排在页面的左侧，但它似乎无法正常工作。我想要在中心栏中的文字在网站链接的侧边栏下方，我希望它们是平行的。我该怎么做，我的代码有什么问题？谢谢！

<!DOCTYPE html>
<html lang="en">
  <style>
 .outer {
    width: 1410px;
    color: navy;
    background-color: pink;
    border: 2px solid darkblue;
    padding: 5px;
 }
  .b {
    text-align: left;
 }
  .c {
    margin-left: 8cm;
 }

  .s {
    text-align: center;
 }
  </style>
  <head>
    <meta charset="utf-8">
    <div class="outer">
      <h1 class="s">Thank you for visiting my webpage!</h1>
    </div>
    <title>My first webpage</title>
  </head>
  <body>
    <nav class="b">
    <h1>My Favorite Websites</h1>
    <ul>
      <li><a href=http://www.youtube.com/>YouTube</a>
      <li><a href=http://www.google.com/>Google</a>
      <li><a href=http://www.reddit.com/>Reddit</a>
      <li><a href=http://www.gamebuino.com/>Gamebuino</a>
      <li><a href=http://www.netflix.com/>Netflix</a>
      <li><a href=http://www.twitch.tv/>Twitch</a>
      <li><a href=http://www.amazon.com/>Amazon</a>
      <li><a href=http://www.ebay.com/>Ebay</a>
    </ul>
    </nav>
    <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

你的代码有一堆问题：

您的 <head> 标签内不应有任何 <div>。
<style> 应该在您的 <head> 标签内。
您可以将 float:left 添加到您的 .b class。
我也关闭了一些 <li>s 并在你的 hrefs 周围添加了引号。

    <!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;
     }
      .c {
        margin-left: 8cm;
     }
    
      .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="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>

另一种解决方案是使用 inline-block。这也将使它能够在较小的屏幕上归为一栏。

.outer {
  max-width: 1410px;
  color: navy;
  background-color: pink;
  border: 2px solid darkblue;
  padding: 5px;
}
.b {
  text-align: left;
  display: inline-block;
  vertical-align: top;
}
.c {
  margin-left: 20px;
  display: inline-block;
  vertical-align: top;
}

.s {
  text-align: center;
}

<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="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>

如何使文本段落或列表并排排列

How to make paragraphs of text or lists line up side-by-side

html

css

nav