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;
}

What I would like my layout to be, is to have the h1 vertically aligned in the center of the top-nav div and I would like the ul to be on the right of the page at the bottom of the top-nav. Why am I getting unexpected results?

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

あなたが望むものを達成することができるいくつかの方法があります。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

それはあなたが持っているスペースのせいでしょうか

<div id= "top-nav">

「id=」の後？

padding-right: 700px;また、 h1要素に使用する代わりに、ul要素を右にフロートさせます。

于 2013-02-17T16:48:12.747 に答える
0

nav が top-nav 要素の下部にある場合は、絶対プロパティを使用できるため、常に下部に固定されます。前の回答で述べたように、H1 に float left を使用しないでください。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

レイアウト要素を正しく使用していないために問題が発生しています。この<ul>要素は、リンクを含むメニューではなく、順序付けられていないリスト用です。また、floatレイアウト用ではなく、画像の周りにテキストを折り返すためだけに使用することを意図していたため、使用しないことを強くお勧めします。フロートはクリアする必要があり、クロスブラウザーではうまく機能しません。

ここでの秘訣は、絶対配置を使用し、値がコンテナーに対して相対的であることを確認することです。そのため、#top-navdiv を設定して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;
}
于 2013-02-17T17:14:52.330 に答える