html - 如何填充边距的整个背景颜色?
问题描述
我无法进行填充,因为我需要一个负数布局,因此它可以小于填充大小 1。并且 Margin 允许我变为负数,这是我需要的,但我似乎无法完全填充它的背景颜色。是否有更好的替代负边距可以完全填充其所选尺寸的背景颜色?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Challenge 3</title>
</head>
<style>
html{
background-color: #518c6b;
}
body{
position: absolute;
right: 320px;
}
#nav{
margin:-10px;
padding:1px;
}
#nav li{
display: inline;
list-style-type: none;
padding-right: 24px;
}
#numbers{
width: 150px;
height: 490px; /*This is what determines the height of the line (the length */
float: right;
padding:10px;
border-top: 3px dashed #ffffff;
margin-left:24px;
background-color:#92AD4E;
}
#content{
list-style-type: none;
text-align: center;
border-top: 3px dashed #ffffff;
}
.copyright{
background-color: #66CDAA;
margin-left:-16px;
margin-right:-1px;
clear: both;
}
ul.noBullets{
list-style-type: none;
text-align: center;
font-size: 18px;
}
#yolo{
background-color:#7c915b;
height: 509px;
padding:1px;
text-align: justify;
padding-left:15px;
}
#header{
background-color: #92AD4E;
height: 90px;
padding-top: 1px;
}
#wrap{
width: 700px;
height: 9px;
}
a {
text-decoration: none;
}
.tab{
margin-left: 40px;
}
#pos{
margin-top: 13px;
padding-left: 450px;
}
#titlePos{
padding-top: 3px;
margin-bottom: -4px;
}
#headPos{
padding-top: 5px;
}
#underline{
text-decoration: underline;
}
#sonnetIndex{
margin-top: -1px;
margin-left: 7px;
font-size:18px;
font-weight: normal;
}
</style>
<body>
<div id="wrap">
<div id="header">
<h1 id="pos">Shakespear.net</h1>
</div>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Writings</a></li>
<li><a href="#">Sonnets</a></li>
<li><a href="#">Life Story</a></li>
<li><a href="#">About Shakespear.net</a></li>
</ul>
</div>
<div id="numbers">
<h2 id="sonnetIndex">Sonnet Index</h2>
<ul id="underline">
<li><a href="#">Sonnet #1</a></li>
<li><a href="#">Sonnet #6</a></li>
<li><a href="#">Sonnet #11</a></li>
<li><a href="#">Sonnet #15</a></li>
<li><a href="#">Sonnet #18</a></li>
</ul>
</div>
<div id="content">
<div id="yolo">
<h1 id="titlePos">Shakespeare's Sonnet #18</h1>
<p id="headPos">This is one of the most famous of the sonnets. It is referenced
in the film Dead Poets Society and gave names to the band The
Darling Buds and the book and television series The Darling Buds
of May. Read it and weep!</p>
<ul class="noBullets">
<li>Shall I compare thee to a summer's day?</li>
<li>Thou art more lovely and more temperate:</li>
<li>Rough winds do shake the darling buds of May,</li>
<li>And summer's lease hath all too short a date:</li>
<li>Sometime too hot the eye of heaven shines,</li>
<li>And often is his gold complexion dimm'd,</li>
<li>And every fair from fair sometime declines,</li>
<li>By chance, or nature's changing course<br> untrimm'd:</br></li>
<li>But thy eternal summer shall not fade,</li>
<li>Nor lose possession of that fair thou ow'st,</li>
<li>Nor shall death brag thou wander'st in his shade,</li>
<li>When in eternal lines to time thou grow'st,</li>
<li>So long as men can breathe, or eyes can see,</li>
<li>So long lives this, and this gives life to thee.</li>
</ul>
<p class="copyright"> See the
<a href="http://en.wikipedia.org/wiki/Shakespeare%27s_Sonnets">
Shakespeare's sonnets</a> Wikipedia article for more information
</p>
</div>
</div>
</div>
</body>
</html>
解决方案
推荐阅读
- java - Chroniclemap - 获取键的子集
- aop - 使用 AspectJ 获取方法的更新参数
- c++ - 即使在禁用 RVO 时定义了移动构造函数,也会发生对象复制
- python - 我在 /post/new/ NOT NULL 约束处收到 IntegrityError 失败:blog_post.author_id
- javascript - 如何在浏览器扩展上下文中通过 TypeScript 访问全局变量(如果可能,部分输入)
- r - 根据包含表中未找到的值的优先级顺序的向量对数据框行进行排序
- python - Selenium:元素无法滚动到视图中
- ruby - 将圆角矩形插入 Prawn 表格单元格红宝石
- java - 如何按行来回填充二维数组
- azure-devops - 如何在 Azure Pipelines yaml 中显示宏 ($(var)) 的值?