html - 文本未出现在列表元素 block 中

标签 html css text position

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

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>

最佳答案

你的问题是因为你的 .red元素是 float 的(与 .left 元素一样)。这意味着该区域中的任何文本内容都将围绕 float - 在这种情况下，它会被向下推。通常，这将使第一个 li元素更高，其文本(“A”)仍在其橙色背景内，但*在* float 的红色区域下方。但是由于您限制了 li 的高度元素到 50px，li他们自己留在原地，然而，他们的内容被推到那些边界之外li .

如果你想保持现状，即两个 float 元素彼此相邻，第三个兄弟元素 .orange-container在第二个( .red )之上，你必须使用 position: absolute并调整位置设置，如下面的代码片段所示(我只是粗略地设置它们，以便给您一个大概的印象)。

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

但我建议以不同的方式进行:制作 .orange .red 的子元素, 删除 float: left来自 .red和 .left而是应用 display: inline-block (和 vertical-align: top; )给他们(并且仍然使 .orange 成为 .red 的子元素，具有相对位置并根据 top 和 left 设置:

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

另请注意，我移动了 <div class="red"> 的开始标记up 直接跟在前一个元素的结束标记之后，以避免这两个内联 block 之间出现空白。

关于html - 文本未出现在列表元素 block 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48764909/

上一篇：css - 文本输入和按钮垂直对齐

下一篇：css - 导航中的 mainmenu.area 导致移动 View 右侧出现白色间隙

相关文章：

JavaScript 全局化 : How to compare two dates?

带有视频和文字的 Android ACTION_SEND_MULTIPLE

javascript - 在 Canvas 上绘制时图像尺寸放大

c# - 如何使用下载链接从 Azure Blob 存储下载文件

css - 规模 :before when hovering

css - 移动网站背景图片无法在 Blackberry Bold 9700 上正确显示

jquery - 基于下拉列表的表格的条件样式

php - 如何使用 php 搜索文本 if ($text contains "World")

file - PowerShell:如何按列对文本文件进行排序？

html - CSS 选择器 - 如何在选择器的事件上应用定义的类

©2024 IT工具网  联系我们