0

そこで、このタイトル ページの下に 2 つの「半分」のナビゲーションを配置しようとしています。1 つは左に、もう 1 つは右にフロートします。

どういうわけか、私が何か悪いことをしていない限り、彼らは本来あるべきように隣り合っていません. コードは次のとおりです。

HTML:

<!DOCTYPE html>
<html>

    <head>
        <title>Landing Mockup</title>
        <link href="mockup.css" rel="stylesheet" type="text/css" media="screen" />
        <link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
    </head>

    <body>
        <div id="landing-container">
            Hello.  I'm Charles Baker.<br />
            <span id="landing-codeblock">{ I design websites. }</span>
            <div id="landing-links">
                <div id="landing-links-left">
                    Small links here.
                </div>
                <div id="landing-links-right">
                    <ul>
                        <li><a href="#">test1</a></li>
                        <li><a href="#">test1</a></li>
                        <li><a href="#">test1</a></li>
                        <li><a href="#">test1</a></li>
                        <li><a href="#">test1</a></li>
                    </ul>
                </div>
            </div>
            <div id="clear"></div>
        </div>
    </body>

</html>

CSS:

body {
    margin-top: 200px;
    font-family: 'Roboto Slab', serif;
}

#landing-container {
    width: 1000px;
    margin: 0 auto;
    font-weight: bold;
    font-size: xx-large;
    text-align: center;
}

#landing-codeblock {
    font-family: 'Droid Sans Mono', monospace;
    font-size: large;
}

#landing-links {
    width: 700px;
    margin: 0 auto;
    border: 1px solid blue;
}

#landing-links-left {
    border: 1px solid orange;
    float: left;
    text-align: left;
    font-size: x-small;
    width: 200px;
}

#landing-links-right {
    font-size: small;
    text-align: right;
    width: 400px;
    float: right;
}

#landing-links ul {
    border: 1px solid green;
    list-style-type: none;
}

#landing-links ul li {
    border: 1px solid red;
    display: inline;
}

#landing-links li a {
    display: inline-block;
    padding: 5px;
}

#clear {
    clear: both;
}

一時的に境界線を引いたので、どこにあるかが分かりますが...ええ。私はそれらを隣り合わせに浮かべる必要があります。私は何か完全に間違っていると思います。何かご意見は？

4

4 に答える 4

1

見よ！http://jsfiddle.net/QHeDZ/

display:inline-block私はあなた.landing-links-leftと.landing-links-rightcssに追加し、フロートを削除しました。これがあなたがやろうとしていたことだと思いますか？そうでない場合は、お知らせください。私はそれを修正することができます。

于 2013-10-18T16:30:41.440 に答える
0

技術的にはそれらは同じ行にありますが、整列を改善するためにマージンと行の高さの値が明確に定義されていません。次のプロパティが含まれます。

#landing-links-left { line-height: 20px; }
#landing-links ul {
    margin: 0;
    line-height: 20px;
}
于 2013-10-18T16:34:35.780 に答える
0

ブラウザーのデフォルトとして、上 (および下) マージンのくさびを取得しています。Chrome で順序なしリストを調べると、ユーザー エージェント スタイル シートから次のことがわかります。

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;

リストの余白を 0 に設定して、このデフォルトを削除できます。また、http://necolas.github.io/normalize.css/を参照することをお勧めします。これは、この種の問題から解放される、共通要素の優れたデフォルト ルール セットを提供します。

于 2013-10-18T16:35:51.193 に答える
0

<div id="clear"></div>このdivを閉じる前に追加するだけです<div id="landing-links"> 

#landing-links-right {
     font-size: small;
     text-align: right;
     width: 400px;
     float: right; //modify this to left(so it could be next to the other container)
}

これがお役に立てば幸いです!乾杯!

于 2013-10-18T16:32:52.807 に答える