Question

以下编码以垂直方式给出列表的输出。如何调整它以使其成为水平列表？例如：http://www.nol.com.sg/wps/portal/nol

    <body>
        <ul id="mainmenu">
            <li><a class="menu" href="">Menu</a>
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">About</a></li>
                </ul>
            </li>
            <li><a class="menu" href="">Company</a>
                <ul>
                    <li><a href="">History</a></li>
                    <li><a href="">News</a></li>
                </ul>
            <li><a class="menu" href="">Contact Us</a></li>
        </ul>
    </body>

Answer 1

在css中使用以下代码：

#mainmenu li{
display:inline;
}

Answer 2

<强> DEMO

<强> HTML

<ul id="mainmenu">
    <li><a class="menu" href="">Menu</a>        
        <ul>
            <li><a href="">Home</a>

            </li>
            <li><a href="">About</a>                
            </li>
        </ul>
    </li>
    <li><a class="menu" href="">Company</a>        
        <ul>
            <li><a href="">History</a>

            </li>
            <li><a href="">News</a>

            </li>
        </ul>
        <li><a class="menu" href="">Contact Us</a>

        </li></li>
    </ul>

<强> CSS

#mainmenu li {
    float:left;
    list-style-type:none;
    margin-right:1px;
    width:80px;
    text-align:center;
}
#mainmenu li li {
    float:none;
    padding:0;
}
#mainmenu li ul {
    display:none;
    padding:0;
}
#mainmenu li:hover ul {
    display: block;
}

Answer 3

http://css.maxdesign.com.au/listutorial/horizontal_master.htm

<强> CSS

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}

<强> HTML

<div id="navcontainer">
    <ul>
    <li><a href="#">Milk</a></li>
    <li><a href="#">Eggs</a></li>
    <li><a href="#">Cheese</a></li>
    <li><a href="#">Vegetables</a></li>
    <li><a href="#">Fruit</a></li>
    </ul>
</div>

Answer 4

仅对作为#mainmenu

的孩子的li有影响

#mainmenu > li {
    float:left
}

Answer 5

<强> DEMO

<强> HTML

<ul id="mainmenu">
    <li><a class="menu" href="">Menu</a>        
        <ul>
            <li><a href="">Home</a>

            </li>
            <li><a href="">About</a>                
            </li>
        </ul>
    </li>
    <li><a class="menu" href="">Company</a>        
        <ul>
            <li><a href="">History</a>

            </li>
            <li><a href="">News</a>

            </li>
        </ul>
        <li><a class="menu" href="">Contact Us</a>

        </li></li>
    </ul>

<强> CSS

#mainmenu li {
    float:left;
    list-style-type:none;
    margin-right:1px;
    width:80px;
    text-align:center;
}
#mainmenu li li {
    float:none;
    padding:0;
}
#mainmenu li ul {

    padding:0;
}
#mainmenu li:hover ul {
    display: block;
}

如何将以下垂直列表更改为水平列表？

5 个答案: