div元素內的全寬？

100％寬度div父母內部的元素div在list內似乎不起作用。div元素內的全寬？

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

來源

2017-03-03 YSuraj

設置填充左爲0微升。瀏覽器製造商爲某些元素添加一些默認樣式，如將下劃線標記爲「a」。您可以使用CSS重置刪除這些樣式。欲瞭解更多信息read this article.

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

來源

2017-03-03 13:39:29

這可能是因爲在默認情況下<li>有display: inline。

您可以嘗試將其更改爲display: inline-block或display: block，具體取決於您的需要。

來源

2017-03-03 13:35:20

你必須從一個UI元素刪除默認填充：

ul { 
padding: 0; 
}

來源

2017-03-03 13:38:18 Fabio

使用瀏覽器的「檢查」功能，看看是什麼原因造成的鋰元素的寬度小於預期。這樣做後，ul元素看起來會消耗81px的寬度。這導致li元素比預期更窄。

格式化的HTML或CSS做出修改更正。

來源

2017-03-03 13:41:24 JohnH

刪除默認padding的ul會得到您想要的結果。

只需添加

ul{ 
    padding: 0; 
}

您CSS。

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

來源

2017-03-03 13:42:02 Yousaf

div元素內的全寬？

回答

相關問題