Question

HTML code：

<div class="nav_wrapper">
    <div id="logo_container">
        <img src="img/logo.png" height="40" width="135">
    </div>
    <ul class="nav">
        <li><a href="index.html">首页</a></li>
        <li><a href="blog.html">文章</a></li>
        <li><a href="gallery.html">作品</a></li>
        <li><a href="about.html">关于</a></li>
    </ul>
</div>

CSS代码：

.nav_wrapper {
    position: relative;
    width: 980px;
    margin: 0 auto;
}
ul.nav {
    float: right;
}
#logo_container {
    line-height: 80px;
    width: 135px;
}
#logo_container img {
    vertical-align: middle;
    border-radius: 50%;
}

如果在div#logo_container之前ul，那么ul块就会出现在父亲的区块中，并且在它父亲的区块之后。

我已设置div#logo_container宽度，并将margin，padding设置为0px;但为什么ul块仍显示在下一行和父块之外。

但是当我将ul放在div#logo_container之前时，它会没问题。

Answer 1

.nav将置于#logo_container下，因为#logo_container为block-level。

＆＃13;

.nav_wrapper {
    position: relative;
    width: 400px;
    margin: 0 auto;
}
ul.nav {
    float: right;
}
#logo_container {
    line-height: 80px;
    width: 135px;
}
#logo_container img {
    vertical-align: middle;
    border-radius: 50%;
}

#logo_container {
    display: inline-block;
}

＆＃13;

<div class="nav_wrapper">
    <div id="logo_container">
        <img src="img/logo.png" height="40" width="135">
    </div>
    <ul class="nav">
        <li><a href="index.html">首页</a></li>
        <li><a href="blog.html">文章</a></li>
        <li><a href="gallery.html">作品</a></li>
        <li><a href="about.html">关于</a></li>
    </ul>
</div>

＆＃13;

为什么浮子块必须在前面？

1 个答案: