Question

我正忙着在业余时间制作自己的网站。我想在页面上运行三列文本，但是我无法摆脱文本中心列上方的空白区域。此外，我在右栏上包装文本时遇到问题（当我添加更多文本时），因此使用单独的p标签，这会在文本之间留下不合需要的空间。

这是我的代码：

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

＆＃13;

Answer 1

你只是有一个错字：

.n {
  text-align: right;
  float: right: /* <- */
}

您需要在此处注明分号;。

一般来说，确保你的标记和CSS是虚荣的。

＆＃13;

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

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

＆＃13;

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

1 个答案: