logo标签列表

子div重叠，不遵守父div宽度

htmlcss
3
我正在构建一个Web应用程序的原型，但是我遇到了div重叠的问题。
我有一个名为#menu的div，宽度为15％;，里面有一个子div名为#list，宽度为100％;。

enter image description here

乍一看，似乎子 div 没有遵守父 div 的限制，需要记住子 div 具有 position: absolute;。关于这个主题有一些问题，但我没有找到适合我的问题。其中一些问题涉及在所有
上应用 clear: both 或应用 display: inline-block;，但都没有起作用。任何帮助将不胜感激。
<html>

  <head>

    <title> PROTOTYPE - opcion.html</title>

    <style type="text/css">

      body {
        margin: 0;
      }

      #menu {
        display: block;
        height: 100%;
        width: 15%;
        background-color:#ff0000;
      }

      #list {
        width: 100%;
        top: 180px;
        position: absolute;
      }

      ul {
        background-color: aqua;
        display: block;
        padding: 0;
        list-style: none;
      }

      li {
        margin: auto;
        width: 100%;
        padding: 10px 0px 10px 10px;
        border-bottom: 1px solid rgba(0,0,0,.6);
      }

      li a {
        color: #ffffff;
        font-size: 25px;
        font-family: "Trebuchet MS", Helvetica, sans-serif;
        text-decoration: none;
      }

    </style>

  </head>

  <body>

    <div id="menu">
      <div id="list">
        <ul>
          <li> <a href="#">Customers</a> </li>
          <li> <a href="#">Students</a> </li>
          <li> <a href="#">Teachers</a> </li>
          <li> <a href="#">Android App</a> </li>
        </ul>
      </div>
    </div>

  </body>

</html>
只需在 #menu 中添加 position:relative，您的绝对定位容器将遵循具有相对位置的父元素属性。当您浮动一个元素时才需要使用“clear”。 - karthick
谢谢！您能否将其写成答案，以便我可以点赞并接受您的建议？ - ivanleoncz
1
当然，谢谢。我正在添加一些参考链接，这将会很有用。 - karthick
谢谢！我很感激，Karthick。 - ivanleoncz
3个回答
4
1
很好的标题。父元素div需要具有相对位置，以便绝对定位的元素能够在其中被包含。将以下代码添加到您的样式中：
#menu {
position: relative;
}
0
请使用以下代码：
<html>


<title> PROTOTYPE - opcion.html</title>

<style type="text/css">
    body {
        margin: 0;
    }

    #menu {
        display: block;
        height: 100%;
        width: 15%;
        background-color: #ff0000;
    }

    #list {
        width: inherit;
        top: 180px;
        position: absolute;
    }

    ul {
        background-color: aqua;
        display: block;
        padding: 0;
        list-style: none;
    }

    li {
        margin: auto;
        width: inherit;
        padding: 10px 0px 10px 10px;
        border-bottom: 1px solid rgba(0,0,0,.6);
    }

        li a {
            color: #ffffff;
            font-size: 25px;
            font-family: "Trebuchet MS", Helvetica, sans-serif;
            text-decoration: none;
        }
</style>


<div id="menu">
    <div id="list">
        <ul>
            <li> <a href="#">Customers</a> </li>
            <li> <a href="#">Students</a> </li>
            <li> <a href="#">Teachers</a> </li>
            <li> <a href="#">Android App</a> </li>
        </ul>
    </div>
</div>

在列表的 CSS 和列表项的 CSS 中使用：

width: inherit;
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接