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

【问题标题】：How to make paragraphs of text or lists line up side-by-side如何使文本段落或列表并排排列
【发布时间】：2017-08-22 18:21:47
【问题描述】：

在业余时间，我一直在用 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>

【问题讨论】：

查看display: inline-block...
您的 HTML 无效

标签： css html nav

【解决方案1】：

你的代码有很多问题：

<head> 标记内不应有任何 <div>。
<style> 应该在您的 <head> 标记内。
您可以将float:left 添加到您的.b 类中。
我还关闭了一些<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>

【讨论】：

非常感谢！这很有帮助。我知道我的代码有很多错误和东西，所以你很慷慨地修复了这些问题并给了我答案。再次感谢！