很抱歉代码太长我只是想问为什么这些代码显示给我不同的网页。
第一个的右边界延伸到最后。
<!DOCTYPE HTML>
<html>
<head>
<title>WEB1 - HTML</title>
<meta charset="UTF-8">
<style>
a {
color: black;
text-decoration: none;
}
.visited {
color: gray;
}
#active{
color: red;
}
h1 {
font-size: 45px;
text-align: center;
border-bottom: 1px solid gray;
margin: 0px;
padding: 20px;
}
ol {
border-right: 1px solid gray;
width: 100px;
margin: 0px;
padding: 20px;
}
body {
margin: 0px;
}
#grid {
display: grid;
grid-template-columns: 150px 1fr;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html" class="visited" id="active">HTML</a></li>
<li><a href="2.html" class="visited">CSS</a></li>
<li><a href="3.html">Javascript</a></li>
</ol>
<div>
<h2>What is HTML?</h2>
<p>
<a href="https://www.w3.org/html5/" target="_blank" title="HTML5 Information">Hypertext Markup Language (HTML)</a> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications. Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
</p>
<p style = "margin-top:45px;">
HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
</p>
</div>
</div>
</body>
</html>但是，当我在ol标记之外添加div标签时，行变短(在正文标签的开头(
<!DOCTYPE HTML>
<html>
<head>
<title>WEB1 - HTML</title>
<meta charset="UTF-8">
<style>
a {
color: black;
text-decoration: none;
}
.visited {
color: gray;
}
#active{
color: red;
}
h1 {
font-size: 45px;
text-align: center;
border-bottom: 1px solid gray;
margin: 0px;
padding: 20px;
}
ol {
border-right: 1px solid gray;
width: 100px;
margin: 0px;
padding: 20px;
}
body {
margin: 0px;
}
#grid {
display: grid;
grid-template-columns: 150px 1fr;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<div>
<ol>
<li><a href="1.html" class="visited" id="active">HTML</a></li>
<li><a href="2.html" class="visited">CSS</a></li>
<li><a href="3.html">Javascript</a></li>
</ol>
</div>
<div>
<h2>What is HTML?</h2>
<p>
<a href="https://www.w3.org/html5/" target="_blank" title="HTML5 Information">Hypertext Markup Language (HTML)</a> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications. Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
</p>
<p style = "margin-top:45px;">
HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
</p>
</div>
</div>
</body>
</html>我想知道为什么会发生这种事。删除div标记的重要性是什么？
默认情况下，网格项被拉伸以覆盖其位置的整个单元格，这是第一个代码中ol的情况。在第二段代码中，您的新div现在被拉伸，其中的ol只有其内容那么高。
您可以添加height:100%来避免这种情况：
a {
color: black;
text-decoration: none;
}
.visited {
color: gray;
}
#active {
color: red;
}
h1 {
font-size: 45px;
text-align: center;
border-bottom: 1px solid gray;
margin: 0px;
padding: 20px;
}
ol {
border-right: 1px solid gray;
width: 100px;
margin: 0px;
padding: 20px;
height:100%; /* added */
}
body {
margin: 0px;
}
#grid {
display: grid;
grid-template-columns: 150px 1fr;
}<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<div>
<ol>
<li><a href="1.html" class="visited" id="active">HTML</a></li>
<li><a href="2.html" class="visited">CSS</a></li>
<li><a href="3.html">Javascript</a></li>
</ol>
</div>
<div>
<h2>What is HTML?</h2>
<p>
<a href="https://www.w3.org/html5/" target="_blank" title="HTML5 Information">Hypertext Markup Language (HTML)</a> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications. Web browsers receive HTML documents
from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
</p>
<p style="margin-top:45px;">
HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics
for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
</p>
</div>
</div>如果你取第一个代码并更改对齐方式，你会得到与第二个代码相同的结果：
a {
color: black;
text-decoration: none;
}
.visited {
color: gray;
}
#active {
color: red;
}
h1 {
font-size: 45px;
text-align: center;
border-bottom: 1px solid gray;
margin: 0px;
padding: 20px;
}
ol {
border-right: 1px solid gray;
width: 100px;
margin: 0px;
padding: 20px;
align-self:start; /* added */
}
body {
margin: 0px;
}
#grid {
display: grid;
grid-template-columns: 150px 1fr;
}<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html" class="visited" id="active">HTML</a></li>
<li><a href="2.html" class="visited">CSS</a></li>
<li><a href="3.html">Javascript</a></li>
</ol>
<div>
<h2>What is HTML?</h2>
<p>
<a href="https://www.w3.org/html5/" target="_blank" title="HTML5 Information">Hypertext Markup Language (HTML)</a> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications. Web browsers receive HTML documents
from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
</p>
<p style="margin-top:45px;">
HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics
for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
</p>
</div>
</div>