子divが重複していて、親divの幅を捨てていない

Webアプリケーションのプロトタイプを構築していて、divの重複に問題があります。子divが重複していて、親divの幅を捨てていない

私はwidth: 15%;で、div要素が#menu呼ばれていて、その中に、私はwidth: 100%;と#listと呼ばれるdivの子を持っています。一見

、子 div要素が子供のdivがposition: absolute;を持っていることを思い出して、親のdivの限界を尊重されていないようです。

この件に関するいくつかの質問がありますが、私のケースに合った質問は見つかりませんでした。いくつかの質問では、すべての部門に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>

出典

2017-06-28 ivanleoncz

#menuを基準に位置を追加するだけです。あなたの絶対的なコンテナは、相対的な位置を持つ親の属性を尊重します。 'クリア'は、要素を浮動させる場合にのみ必要です。 – karthick

ありがとう！私はあなたの推薦を受け入れることができますので、答えとして書くか？ – ivanleoncz

確かにありがとう。私は有用であるいくつかの参照リンクも追加しています – karthick

ジャストの位置を追加します。あなたの絶対的なコンテナは、相対的な位置を持つ親の属性を尊重します。あなたは要素をフロートする場合にのみ

「クリア」 https://developer.mozilla.org/en-US/docs/Web/CSS/position https://css-tricks.com/almanac/properties/p/position/

位置についての詳細を学ぶためには必要とされます。

出典

2017-06-28 21:25:50 karthick

ニースのタイトル。親divは絶対配置された要素をその内部に含めるために相対位置を持つ必要があります。あなたのスタイルにこのコードを追加します。

#menu { 
position: relative; 
}

出典

2017-06-28 21:21:33

使用この：

<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とLi CSSの使用中

：#menuに対する相対：

width: inherit;

出典

2017-06-28 21:25:10 Mtu

子divが重複していて、親divの幅を捨てていない

答えて

関連する問題