UL > LI CSS/HTML Question_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-20 02:12 出处：网络

I have multiple menus (ul) and each have li\'s inside them. For example, the main navigation menu for the site is horizontal. But, I also have several other menus for products on a page, and those men

相关专题：css html-lists

I have multiple menus (ul) and each have li's inside them. For example, the main navigation menu for the site is horizontal. But, I also have several other menus for products on a page, and those menus are vertical.

I don't want to go adding class="verticalMenuOption" to all of the menus that I want to be vertical, because that just makes things look ugly in the code, and ugliness is very distracting for me.

Is there a way to have 1 menu with horizontal li's, and every other menu on the site horizontal li's?

Horizontal:

            <ul class="menu">
                <li class="selected"><a href="@Href("~/")">Home</a></li>
                <li><a href="@Href("~/")">Products</a></li>
                <li><a href="@Href("~/")">About Us</a></li>
                <li><a href="@Href("~/")">Help &amp; Support</a></li>
                <li><a href="@Href("~/")">Contact Us</a></li>
                <li class="selected"><a href="@Href("#")">My Account</a><开发者_开发百科/li>
            </ul>

Vertical:

            <ul class="menu">
                <li class="selected"><a href="@Href("~/")">sample</a></li>
                <li><a href="@Href("~/")">sample</a></li>
                <li><a href="@Href("~/")">sample</a></li>
                <li><a href="@Href("~/")">sample</a></li>
                <li><a href="@Href("~/")">sample</a></li>
                <li class="selected"><a href="@Href("#")">sample</a></li>
            </ul>

I think you meant to say 1 horizontal, the others all vertical. But anyway, if vertical is the rule, and there's only one exception, style your ul to be vertical (which is default), and then make a single exception for the nav. If your nav has an id, you can use that as a css selector, like #nav, so you don't need to add a new css class.

make the default menu vertical (by accessing .menu class), and add a horizontal class to the one you want as horizontal + style it as horizontal.

Add an id to the menu you want to be horizontal

<ul id="horizontal" class="menu"> ... </ul>

<ul class="menu"> ... </ul>

then in your CSS file

#horizontal { display:inline }

usually each of those menus would be likely to have different ancestors, or parent divs.. maybe the horizontal one is in a div called "header" and the vertical content one in a div called "content" or "sidebar" - it doesn't matter if they're direct parents or not as long as they are unique in the ascendency

you can then target each list separately

#header .menu {.. your styles ..}
.content .menu  {.. your styles ..}

There's not really enough code here to explain properly, but there is usually a way of isolating an element without having to add more classes, if not then as already mentioned you can do that or you can add in the wrapper divs with ID's

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style type="text/css">
        #vertical li {
            display: block;
            float: left;
            padding-right: 15px;
            list-style-type: none;
        }
    </style>
</head>
<body>
    <ul class="menu" id="horizontal">
        <li class="selected"><a href="@Href("~/")">Home</a></li>
        <li><a href="@Href("~/")">Products</a></li>
        <li><a href="@Href("~/")">About Us</a></li>
        <li><a href="@Href("~/")">Help &amp; Support</a></li>
        <li><a href="@Href("~/")">Contact Us</a></li>
        <li class="selected"><a href="@Href("#")">My Account</a></li>
    </ul>
    <ul class="menu" id="vertical">
        <li class="selected"><a href="@Href("~/")">sample</a></li>
        <li><a href="@Href("~/")">sample</a></li>
        <li><a href="@Href("~/")">sample</a></li>
        <li><a href="@Href("~/")">sample</a></li>
        <li><a href="@Href("~/")">sample</a></li>
        <li class="selected"><a href="@Href("#")">sample</a></li>
    </ul>
</body>
</html>