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

您的代码存在许多问题：

<div>代码中不应包含任何<head>。
<style>应位于<head>标记内。
您可以在float:left课程中添加.b。
我还关闭了一些<li>并在href周围添加了引号。

＆＃13;

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

＆＃13;

另一种解决方案是使用inline-block。这也将使它在较小的屏幕上落入一列。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: