为什么我的div稍微向右移动

Question

所以我只是这个HTML和CSS的缩影，我试图建立自己的网页。问题是，它看起来像这样：

虽然我想让第二个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;
}

提前致谢^^

Answer 1

你混合了display: inline-block和float:left这没有任何意义。默认情况下浮动的元素变为display: block;。 http://www.w3.org/TR/CSS2/visuren.html#float-position

有两种方法可以解决您的问题。

Way1 Go 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;
}

此解决方案的关键是width的{​​{1}}等于.diary的{​​{1}}

Answer 2

试试这个

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