gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 00:53:58 26 4
gpt4 key购买 nike

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

这是我的代码:

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

最佳答案

你只是有一个错字:

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

关于css - 在单独的列中文本换行问题 html5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45826553/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com