1

<div id="container">ナビゲーション メニューの右側に表示したいのですが、問題が発生しています。

誰でもこれで私を助けてくれませんか。

index.php

<!-- This is the page identifier. Change on each of your pages! -->
<?php $page ='page_index'; ?>
<!doctype html>
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <meta name="description" content="Example of PHP include active navigation">
    <link rel="stylesheet" href="style.css">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <div id="container">
        <header>
            <h1>Index page</h1>
        </header>

        <!-- This is where we want to include the nav.php file! -->
        <?php include("nav.php"); ?>

        <div id="main" role="main">
            <p>This is the index page</p>
        </div>

        <footer>
            <p>This is the footer</p>
        </footer>
    </div>
</body>
</html>

nav.php

<nav role="navigation" id="<?php echo $page ?>">
    <ul>
        <li><a class="index" href="index.php">Home</a></li>
        <li><a class="about" href="about.php">About</a></li>
        <li><a class="contact" href="contact.php">Contact</a></li>          
    </ul>
</nav>

スタイル.css

nav ul {
    list-style: none; 
    display:inline-block;
        float:left;
}

ul a {
    color:green;

}

nav#page_index ul li a.index, 
nav#page_about ul li a.about, 
nav#page_contact ul li a.contact {
    color:red;
}

これは私がstyle.cssに追加したものです

div.container
{
   float:left;
}

見栄えの良い書式設定で左側のナビゲーション メニューを作成する方法を教えてください。

前もって感謝します..！

4

2 に答える 2

2

左側のナビゲーション メニューの横に必要なコンテンツを新しいdiv要素でラップします。次に、float:leftこのコンテナーとナビゲーション メニューに追加します。簡単に言えば、兄弟を並べて表示するには、両方の兄弟を浮かせる必要があります。明らかな兄弟はいないため、コンテンツをラップして作成することをお勧めします。

HTML

<div id="container">
        <header>
            <h1>Index page</h1>
        </header>

        <nav role="navigation" id="nav">
        <ul>
            <li><a class="index" href="index.php">Home</a></li>
            <li><a class="about" href="about.php">About</a></li>
            <li><a class="contact" href="contact.php">Contact</a></li>          
         </ul>
        </nav>
        <div id="content">
            <div id="main" role="main">
                <p>This is the index page</p>
            </div>

            <footer>
                <p>This is the footer</p>
            </footer>
         </div>
    </div>

CSS

#content,#nav{
    float:left;
}

作業例 http://jsfiddle.net/vmr95/

于 2013-06-19T08:36:34.430 に答える