【发布时间】：2018-02-13 10:44:50
【问题描述】：
我目前正在做一项作业，但我无法弄清楚为什么橙色容器列表中的文本不在橙色框中。这些盒子位于我希望它们所处的位置，但我不明白为什么这些字母位于完全不同的空间中。与元素关联的文本不应该与元素一起移动吗？我的意思是，为什么粉红色的盒子可以，但橙色的盒子不行。感谢您的帮助！
This is what my issue looks like
main {
margin: 0 auto;
width: 400px;
}
.clearfix::after {
content: "";
clear: both;
display: block;
}
.blue-container {
height: 100px;
width: 400px;
position: relative;
}
.top {
background-color: #141f40;
height: 100px;
width: 400px;
float: right;
}
.white-container {
background-color: white;
height: 60px;
width: 160px;
position: absolute;
top: 20px;
left:220px;
}
.white-container>li{
background-color: #a9004b;
height: 40px;
width: 40px;
float: left;
margin-left: 10px;
margin-top: 10px;
}
.left {
background-color: #80bfa8;
height: 250px;
width: 150px;
float: left;
}
.red {
background-color: #8c2727;
height: 250px;
width: 250px;
float: right;
}
.orange-container {
position: relative;
left: 180px;
top: 20px;
padding: 10px;
}
.orange-container>li{
background-color: #ff863f;
box-sizing: border-box;
height: 50px;
width: 150px;
border: 5px solid white;
margin-top: 10px;
}
.bottom {
background-color: #d98d30;
height: 100px;
width: 400px;
}
/* from yahoo ui */
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}<head>
<title>Puzzle 3 Farshad</title>
<link rel="stylesheet" type="text/css" href="style3.css">
<!--link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"-->
</head>
<body>
<main>
<div class="blue-container">
<div class="top">Top</div>
<ul class="white-container clearfix">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="clearfix">
<div class="left">Left</div>
<div class="red">Red</div>
<ul class="orange-container">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
<div class="bottom">Bottom</div>
</main>
</body>【问题讨论】：
-
外部样式表无法通过 HTTPS 获得，因此它不会在 SO sn-p 中加载。我试图将内容复制并粘贴到您的 sn-p 中，但它仍然看起来不像您的屏幕截图，甚至没有任何橙色框。请编辑并修复此问题，以便我们看到您在说什么。
-
对不起！我不知道发生了什么！我修复了它，问题出现在 SO sn-p 中。感谢您的耐心等待。