div要素内の全幅ですか？

Question

100％幅div親の内部divlist内の要素が動作していないようです。デフォルト<li>でdisplay: inlineを持っているので、おそらくです

.parent { 
 
    position : relative; 
 
    width : 200px; 
 
    height : 200px; 
 
    background-color : #888888; 
 
} 
 

 
.child { 
 
    width : 100%; 
 
    height : 40px; 
 
    background-color : #555555; 
 
    margin : 1px 0 0 0; 
 
} 
 
li { 
 
list-style-type : none; 
 
}

<div class="parent"> 
 
    <ul> 
 
     <li><div class="child"></div></li> 
 
     <li><div class="child"></div></li> 
 
    </ul> 
 
</div>

Answer 1

セットパディング左ULのために0にします。ブラウザメーカーは、「a」タグに下線を引くような要素に、デフォルトのスタイリングを追加します。 CSSリセットを使用して、これらのスタイリングを削除できます。詳細情報については

.parent { 
 
    position : relative; 
 
    width : 200px; 
 
    height : 200px; 
 
    background-color : #888888; 
 
} 
 

 
.parent ul { padding-left: 0; } 
 

 
.child { 
 
    width : 100%; 
 
    height : 40px; 
 
    background-color : #555555; 
 
    margin : 1px 0 0 0; 
 
} 
 
li { 
 
list-style-type : none; 
 
}

<div class="parent"> 
 
    <ul> 
 
     <li><div class="child"></div></li> 
 
     <li><div class="child"></div></li> 
 
    </ul> 
 
</div>

Answer 2

。

必要に応じて、display: inline-blockまたはdisplay: blockに変更できます。

Answer 3

あなたは、UL要素からデフォルトのパディングを削除する必要があります。

ul { 
padding: 0; 
} 

Answer 4

利用のブラウザの「点検」機能read this article.

は予想より小さい幅を持っているのli要素を引き起こしているかを確認します。そうすることで、ul要素は81pxの幅を消費するように見えます。これにより、li要素が予想よりも狭くなります。

HTMLを再フォーマットまたはこれを修正するために、CSSの変更を行います。

Answer 5

デフォルト値paddingをulにすると、結果が得られます。

ちょうどあなたのCSSに

ul{ 
    padding: 0; 
} 

を追加します。

.parent { 
 
    position : relative; 
 
    width : 200px; 
 
    height : 200px; 
 
    background-color : #888888; 
 
} 
 

 
.child { 
 
    width : 100%; 
 
    height : 40px; 
 
    background-color : #555555; 
 
    margin : 1px 0 0 0; 
 
} 
 
li { 
 
list-style-type : none; 
 
} 
 

 
ul{ 
 
    padding: 0; 
 
}

<div class="parent"> 
 
    <ul> 
 
    <li><div class="child"></div></li> 
 
    <li><div class="child"></div></li> 
 
    </ul> 
 
</div>