UL > LI CSS/HTML Question
Question
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 & 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>
5 answers
solution1
1 2011-03-28 14:07:41
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.
solution2
0 2011-03-28 14:15:25
将默认菜单设置为垂直（通过访问.menu类），然后向您要添加的horizontal类添加一个horizontal类+将其设置为水平样式。
solution3
0 2011-03-28 16:14:02
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 }
solution4
0 2011-03-28 16:14:57
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
solution5
0 2019-09-06 09:10:11
<!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 & 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.