Question

我目前正在做作业，我无法弄清楚为什么橙色容器列表中的文字不在橙色框中。盒子处于我希望它们所处的位置，但我不明白为什么这些字母处于一个完全不同的空间。不应该与元素相关联的文本与元素一起移动吗？我的意思是，为什么粉红色的盒子还可以，但不是橘子的盒子。我感谢任何帮助！

This is what my issue looks like

＆＃13;

 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}

＆＃13;

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

＆＃13;

Answer 1

您的问题是由于您的.red元素已浮动（与.left元素一样）。这意味着该区域中的任何文本内容都会在周围浮动 - 在这种情况下，它会被推下来。通常，这会使第一个li元素更高到其文本（＆＃34; A＆＃34;）仍然在其橙色背景内，但*在浮动的红色区域下*。但是，由于您将li元素的高度限制为50px，li sselselvess保持原样，然而，他们的内容被推下 - 在li的边界之外

如果你想要掌握情况，即两个浮动元素彼此相邻，第三个兄弟元素.orange-container位于第二个（.red）之上，你必须使用position: absolute并调整位置设置，如下面的代码段所示（我只是将它们设置为近似给您一般印象）。

＆＃13;

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: absolute;
  left: 300px;
  top: 120px;
  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}

＆＃13;

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

＆＃13;

但我建议采取不同的方式：将.orange作为.red的子元素，从float: left和.red移除.left，然后应用{ {1}} {和display: inline-block）{和vertical-align: top; .orange .red的{@ 1}}个子元素，具有相对位置且符合top和left设置：

＆＃13;

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;
  display: inline-block;
  vertical-align: top;
}
.red {
  background-color: #8c2727;
  height: 250px;
  width: 250px;
  display: inline-block;
  vertical-align: top;
}
.orange-container {
  position: relative;
  left: 30px;
  top: 0px;
  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}

＆＃13;

<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
        <ul class="orange-container">
          <li>A</li>
          <li>B</li>
          <li>C</li>
        </ul>
      </div>
    </div>
    <div class="bottom">Bottom</div>
  </main>
</body>

＆＃13;

另请注意，我将<div class="red">的开始标记向上移动，直接跟在前一个元素的结束标记之后，以避免这两个内联块之间的空格。

文本未出现在列表元素块中

1 个答案: