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

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 个解决方案

解决方案1
2 2014-04-11 12:59:37

解决方案2
2 已采纳 2014-04-11 13:09:23

解决方案3
1 2014-04-11 12:56:21

解决方案4
0 2014-04-11 13:12:51

解决方案5
0 2014-04-11 13:28:56

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

问题描述

5 个解决方案

解决方案1 2 2014-04-11 12:59:37

解决方案2 2 已采纳 2014-04-11 13:09:23

解决方案3 1 2014-04-11 12:56:21

解决方案4 0 2014-04-11 13:12:51

解决方案5 0 2014-04-11 13:28:56

解决方案1
2 2014-04-11 12:59:37

解决方案2
2 已采纳 2014-04-11 13:09:23

解决方案3
1 2014-04-11 12:56:21

解决方案4
0 2014-04-11 13:12:51

解决方案5
0 2014-04-11 13:28:56