Question

我有多个菜单（ul），每个菜单都有li。例如，站点的主导航菜单是水平的。但是，我还在页面上有几个其他产品菜单，这些菜单是垂直的。

我不想将class =“verticalMenuOption”添加到我想要垂直的所有菜单中，因为这只会让代码看起来很丑陋，丑陋对我来说非常分散注意力。

有没有办法让1个菜单有水平li，而网站上的每个其他菜单都是横向li？

水平：

            <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>

垂直：

            <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>

Answer 1

我认为你的意思是说1横向，其他都垂直。但无论如何，如果垂直是规则，并且只有一个例外，请将ul设置为垂直（默认设置），然后为导航设置一个例外。如果您的导航具有ID，则可以将其用作css选择器，例如#nav，因此您无需添加新的css类。

Answer 2

将默认菜单设置为垂直（通过访问.menu类），并将horizontal类添加到您想要的水平对象+将其设置为水平。

Answer 3

在想要横向的菜单中添加ID

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

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

然后在你的CSS文件中

#horizontal { display:inline }

Answer 4

通常这些菜单中的每一个都可能有不同的祖先或父div ..也许水平的菜单位于名为“header”的div中，而div中的垂直内容称为“content”或“sidebar” - 如果他们是直接的父母，只要他们在提升方面是独一无二的，这无关紧要

然后您可以单独定位每个列表

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

这里没有足够的代码可以正确解释，但通常有一种隔离元素而不必添加更多类的方法，如果没有，那么如前所述，你可以这样做，或者你可以添加带ID的包装器div

Answer 5

<!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>

UL> LI CSS / HTML问题

5 个答案: