不可能中心精確地裏的一個div內

HTML代碼：

<div id="medium_ribbon">   
    <ul class="up_rectangles"> 
     <li id="first_up">&nbsp;</li> 
     <li id="second_up">&nbsp;</li> 
     <li id="third_up">&nbsp;</li> 
     <li id="fourth_up">&nbsp;</li>  
    </ul> 
</div>

接下來，CSS代碼：

#medium_ribbon {  
    text-align:center; 
    background-color:#172236; 
    padding-top:20px; 
} 
.up_rectangles{ 
    list-style: none; 
    margin-bottom: 0px;  
} 
.up_rectangles li { 
    line-height: 200px; 
    width: 265px; 
    background-color: #C8CACF; 
    display: inline-block; 
    margin-right:15px; 
} 
.up_rectangles>li:last-child { 
    margin-right:0; 
}

最後，結果： enter image description here

圖片有點對齊t他是對的，無論我嘗試過多少次，我都無法找到原因。謝謝

來源

2014-02-24 Unknown developer

不，你是不對的！ –

你的'.up-rectangles'裏面有40px的填充，它來自某個地方。只需爲此元素設置填充0。 – ElliotSchmelliot

您的瀏覽器的默認樣式表會自動將填充放在.up_rectangles上。

如果通過對這個CSS規則簡單的復位：

.up_rectangles{ 
    padding: 0; 
}

然後按預期它會工作：http://jsfiddle.net/R8pL3/

來源

2014-02-24 22:59:26 YMMD

添加padding-left:0您.up_rectangles類。默認情況下，瀏覽器將填充添加到ul元素。通過將padding-left:0添加到ul您將解決此問題。

.up_rectangles{ 
    list-style: none; 
    margin-bottom: 0px; 
    padding-left:0;  
}

這裏是工作demo。

來源

2014-02-24 23:00:18

默認<ul>有一些padding和margin。

因此，在`.up_rectangles'類中添加margin:0和padding:0。

所以代碼會像。

.up_rectangles 
{ 
list-style-type: none; 
margin: 0; 
padding:0 
}

來源

2014-02-24 23:04:43

一旦你對答案感到滿意，你應該接受答案，所以未來其他人可以很容易地得到解決方案。 –

不可能中心精確地裏的一個div內

回答

相關問題