爲什麼我的div稍微移動到右邊

所以我只是這個HTML和CSS的東西的起點，我試圖做我自己的網頁。問題是，它看起來像這樣：爲什麼我的div稍微移動到右邊

enter image description here

雖然我想獲得的第二個div（#diary）爲中心，但沒有搞砸了整個網頁，我不能做到這一點。這將是正確的代碼？這是我有：

HTML：

<div id="progress"> 
Blablabla 
</div> 

<div id="diary"> 
blablabla 
</div>

CSS：

div { 
border: 7px solid #142538; 
background-color: #c7d0e1; 
} 

#diary { 
margin:auto; 
width:30em; 
display:inline-block; 
} 

#progress { 
font-size:16px; 
width:auto; 
float:left; 
display:inline-block; 
margin-left:25px; 
}

在此先感謝^^

來源

2014-03-25 Systemallica

的margin-left這人肯定也需要一個小提琴！ – lshettyl

試試這個

#diary { 
    margin:0 auto; 
    width:30em; 
    display:block; 
}

來源

2014-03-25 18:10:42 James

你已經混display: inline-block和float:left，這是沒有意義的。浮動元素默認爲display: block;。 http://www.w3.org/TR/CSS2/visuren.html#float-position

有兩種方法可以解決您的問題。

WAY1轉到inline-block的一路：

http://jsfiddle.net/fDx2U/

div { 
    border: 7px solid #142538; 
    background-color: #c7d0e1; 
} 
#diary { 
    margin:auto; 
    width:30em; 
    display:inline-block; 
    vertical-align: top; 
} 
#progress { 
    font-size:16px; 
    width:auto; 
    vertical-align: top; 
    display:inline-block; 
    margin-left:25px; 
}

如何將擺脫項目之間的邊距：How to remove the space between inline-block elements?

重要此解決方案是vertical-align:top; （你最初的問題）

Way2轉到浮動一路：

http://jsfiddle.net/fDx2U/1/

div { 
    border: 7px solid #142538; 
    background-color: #c7d0e1; 
} 
#diary { 
    margin-left: 100px; 
} 
#progress { 
    font-size:16px; 
    width:auto; 
    float:left; 
    margin-left:25px; 
    width: 100px; 
}

重要此解決方案是，.diary的width等於#progress

來源

2014-03-25 18:18:47

爲什麼我的div稍微移動到右邊

回答

相關問題