0 
<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 在顶部导航 div 的中心垂直对齐，我希望 ul 在顶部导航底部的页面右侧。为什么我会得到意想不到的结果？

4

5 回答 5

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;
}
于 2013-02-17T16:51:14.987 回答
0

可能是因为你进入的空间

<div id= "top-nav">

在“id=”之后？

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

于 2013-02-17T16:48:12.747 回答
0

对于您的导航位于顶部导航元素的底部，您可以使用绝对属性，因此它始终固定在底部。正如前面的答案所说，不要为 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;
}

它回答了吗？

编辑

于 2013-02-17T16:55:22.587 回答
0

有几种方法可以实现你想要的。Fe，用于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;
}
于 2013-02-17T17:10:20.117 回答
0

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

这里的技巧是使用绝对定位并确保值是相对于容器的，所以你必须设置#top-navdivposition: 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;
}
于 2013-02-17T17:14:52.330 回答