-1

我有以下代码，现在只是 div 中的一个徽标，但我正在尝试添加一些导航单元格，稍后我将设置它们的样式。问题是，我似乎无法让它们与（除此之外的）标志“一致”，它们总是下降到下一行。我究竟做错了什么？

    #header {
    position:relative;
    padding-top:0px;
    width:960px;
    margin-left: auto ;
    margin-right: auto ;
    }
    #nav {
    padding:0px;
    height:20px;
    }
    #nav ul {
    margin:0;
    padding:0;
    list-style:none;
    }
    #nav li {
    display:inline;
    margin:0;
    padding:0;
    }

    <div id="header">
    <img src="logo3.png" height="91" width="162">
            <div id="nav">
            <ul>
            <li>nav item 1</li>
            <li>nav item 2</li>
            <li>nav item 3</li>
            </ul>
    </div>
    </div>
4

2 回答 2

2

在这里，http://jsfiddle.net/PLmSB/1/

经过铬测试

你只需要添加

#nav {
    display: inline-block;
    vertical-align:top; /*optional*/
}

请务必阅读这篇关于Inline-Block 的跨浏览器支持的文章

否则，正如@Ana 指出的那样，

img {
    float: left;
}

这应该有效。http://jsfiddle.net/PLmSB/3/

于 2012-07-15T22:41:53.313 回答
0

您应该浮动徽标。http://dabblet.com/gist/3118980

于 2012-07-15T22:44:59.410 回答