html - 为什么我的 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，这毫无意义。默认情况下， float 元素变为 display: block;。 http://www.w3.org/TR/CSS2/visuren.html#float-position

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

Way1 一路内联阻塞:

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 的 margin-left