Question

<html>
<head>
<link rel="stylesheet" href="../static/styles/base.css" type="text/css" />
</head>
<body>
    <div id= "top-nav">
        <h1>Sitename</h1>
        <ul>
            <li><a href="#">Feed</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Settings</a></li>
        </ul>
    </div>
</body>
</html>

＃

html,
body {
    height: 100%;
    width: 100%;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

#top-nav{
background-color: Gray;
width: 100%;
height: 135px;
padding: 0 0 0 0;
margin: 0 0 0 0;
}


#top-nav h1{
    float: left;
    margin: inherit;
    padding-right: 700px;

}

#top-nav ul{
    float: left;
    bottom: 0;
}

#top-nav li{
    text-align: right;
    display: inline;
    padding-right: 5px;
}

我希望我的布局是将h1垂直对齐在top-nav div的中心，我希望ul位于top-nav底部的页面右侧。为什么我会得到意想不到的结果？

Answer 1

padding-right: 700px中的#top-nav h1规则正在推动ul元素的位置。

这样的事情应该有效：

html,
body {
    height: 100%;
    width: 100%;
    padding: 0; /* You can just have one 0 instead of "0 0 0 0". */
    margin: 0;
}

#top-nav {
    background-color: Gray;
    width: 100%;
    height: 135px;
}

#top-nav h1 {
    float: left;
    line-height: 135px; /* Set to the height of #top-nav */
    margin: 0;
}

#top-nav ul {
    float: right;
}

#top-nav li {
    text-align: right;
    display: inline;
    padding-right: 5px;
}

Answer 2

可能是因为你所拥有的空间

<div id= "top-nav">

在“id =”之后？

另外，不要将padding-right: 700px;用于h1元素，只需将ul元素浮动到右侧。

Answer 3

如果您的导航位于top-nav元素的底部，则可以使用绝对属性，因此它始终固定在底部。不要像上一个回答所说的那样使用H1左边的浮动。为了使你的h1垂直对齐，你可以尝试不同的填充来获得你想要的东西（或者你可以通过使用display：table ...来制作更复杂的脚手架）但更简单的是：

#top-nav h1{
        padding-top:30px;
        display:inline-block;
        width:auto;
        vertical-align:middle; 
}


#top-nav ul{
    position:absolute;
    top:100px;
    right:5px;
}

它回答了吗？

修改

Answer 4

有几种方法可以达到你想要的效果。 F.e.，用于垂直对齐h1中间的#top-nav：

#top-nav h1 {
    ...
    line-height: 135px;
    margin: 0;
}

并对齐ul底部的#top-nav：

#top-nav {
    ...
    position: relative;
}
#top-nav ul {                           
    ...
    position: absolute;
    bottom: 0;
    right: 0;
}

Answer 5

由于您错误地使用布局元素，因此遇到了问题。 <ul>元素用于无序列表，不适用于包含链接的菜单。此外，强烈建议不要使用float，因为它仅用于文本环绕图像而不是布局。浮动必须清除，并且跨浏览器不能很好地工作。

这里的技巧是使用绝对定位并确保该值相对于容器，因此您必须将#top-nav div设置为position: relative，否则其子项将相对于第一个定位父元素，在这种情况下很可能是body元素。

这适用于我： http://jsfiddle.net/gc3EY/1/

HTML：

<html>

    <head>
        <title>Test</title>
    </head>

    <body>
        <div id="top-nav">
             <h1>Sitename</h1>
        <span>
            <a href="#">Feed</a>
            <a href="#">Profile</a>
            <a href="#">Settings</a>
        </span>

        </div>
    </body>

</html>

CSS：

body { margin: 0; padding: 0; overflow-x: hidden;}

div#top-nav span {
    position: absolute;
    bottom: 0px;
    padding: 0;
    margin: 0;
    text-align: right;
    width: 97%;
}
div#top-nav span a {
    padding: 0 2px;
}
div#top-nav {
    background-color: gray;
    width: 100%;
    height: 135px;
    margin: 0px;
    padding: 5px;
    position: relative;
}
div#top-nav h1 {
position: relative;
top: 0px;
    margin: 0;
    padding: 0;
}

为什么这不能正确对齐我的元素？

5 个答案: