0

順序付けされていないリストを使用してナビゲーションメニューを作成し、それを水平方向に表示しようとしています。各liにはdivタグがあり、より多くのdivが含まれているため、より多くのスタイリングが可能ですが、何も表示されていないにもかかわらず、リストがドロップダウンしているように見えます。これがそのためのJSFiddleです：http：//jsfiddle.net/E8jqN/2/

また、そのhtmlは次のとおりです。

<div id="header-right">
    <ul id="navigation">
        <li>
            <div class="nav-button">
                <div id="schools">
                </div>
            </div>
            <div class="nav-text">
                Schools
            </div>
        </li>
        <li>
            <div class="nav-button">
                <div id="professors">
                </div>
            </div>
            <div class="nav-text">
                Professors
            </div>
        </li>
        <li>
            <div class="nav-button">
                <div class="Programs">
                </div>
            </div>
            <div class="nav-text">
                Programs
            </div>
        </li>
        <li>
            <div class="nav-button">
                <div class="account">
                </div>
            </div>
            <div class="nav-text">
                My Account
            </div>
        </li>
    </ul>
</div>

そしてcssは：

#header-right{
    float: right;
    width: 366px;
    height: 64px;
    background-image:url('http://localhost/gradebyme/gradebyme/public/img/midtile2.png');
    background-repeat:repeat-x;
}

#navigation{
/*    position: relative;
    background: url('http://localhost/gradebyme/gradebyme/public/img/icontest.png');*/
    margin: 0;
    padding: 0;
    list-style: none;
}

#navigation li{
    width: 88px;
    height: 64px;
    display: inline;
}

.nav-button{
    width: 88px;
    height: 40px;
}

.nav-text{
    width: 88px;
    height: 24px;
    color:blue;
}

#schools{
    float: left;
    width: 37px;
    height: 26.75px;
/*    background-position: 0 0;*/
}

#professors{
    float: left;
    width: 37px;
    height: 26.75px;
/*    background-position: 0 -27px;*/
}

#programs{
    float: left;
    width: 37px;
    height: 26.75px;
    background-color: green;
/*    background-position: 0 -55px;*/
}

#account{
    float: left;
    width: 37px;
    height: 26.75px;
    background-color: purple;
/*    background-position: 0 -83px;*/
}

それらをすべて水平に表示するために必要です。その後、アイコンの追加に取り組むことができます。どんな助けでも大歓迎です！また、一般的なcssのヒントも高く評価されています。

4

3 に答える 3

0

nav-buttonsとnav-textをスタイルfloatのdivでラップします：左

于 2012-12-29T01:46:54.213 に答える
0

私があなたが望むものを理解していれば、あなたは単にfloat:left;あなたにを追加することができます。#navigation li

http://jsfiddle.net/E8jqN/7/

于 2012-12-29T01:48:11.857 に答える
0 
#navigation li{
float: right;
width: 88px;
height: 64px;}

また

#navigation li{
width: 88px;
height: 64px;
display: inline-block;}
于 2012-12-29T01:48:34.337 に答える