how to display css Horizontal menu?_问答_开发者

开发者 https://www.devze.com 2023-03-11 15:44 出处：网络

i tried to ask same question on this post but the result i get shows the menu in vertical how do i display it horizontal. if i set the display property block then it sets menu vertically? please

相关专题：css

how to display css Horizontal menu?

i tried to ask same question on this post but the result i get shows the menu in vertical

how do i display it horizontal. if i set the display property block then it sets menu vertically? please share code if possible i asked same question her you will get code

Please Share CSS and HTML code that wi开发者_高级运维ll give me expected result;

I would do something like this...

li#home {
   padding: 40px 0 0 0;
   background: url(images/home.png) no-repeat center top;
}

You may also possibly need margin-bottom: -10px to move it down from its siblings.

This is the code I would use. I'm not going to assume your knowledge of HTML/CSS, so here goes:

HTML:

<ul id="navigation">
    <li class="home"><a href="#" title="Home">Home</a></li>
    <li class="car"><a href="#" title="Car">Car</a></li>
    <li class="mobile"><a href="#" title="Mobile">Mobile</a></li>
    <li class="old"><a href="#" title="OldThings">OldThings</a></li>
</ul>

CSS:

#navigation {
    list-style: none;
    margin: 0;
    padding: 0;
}
#navigation li {
    float: left;
}
#navigation li a {
    display: block;
    padding: 50px 20px 20px;
}

You will also need to add your image (seen over the 'Home' item) - which I would suggest as a background image, on the "a" tag.

If you do want the "Home" link to be on a different level as the others, you can simply change the "home"'s class to be something like this:

#navigation li.home a {
    display: block;
    padding: 60px 20px 10px;
}

Just adjust the padding on the "a" style, to match where you want each element (as I have guessed :) ). You'll also have to add colours, and hover states.

Good luck!

you need this ...

display: block;

inline lays out all the elements horizontally. block lays out the elements one above the other. i don't think you will be able to layout that one LI element with the display: block because you have an element and a (or something along those lines in the same LI element.

you would be better off to set the width property for that one LI element to be small enough that it automatically lays out the word on the next line instead of being auto width.

Just use clear:right;flow:left; to your image see example here is demo: http://3dserg.be/test/hormenu.html

here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
<head>

<style type="text/css">
#navcontainer
{
margin: 0;
padding: 0;
height: 22px;
font: 11px Verdana, sans-serif;
width: 100%;
border-bottom: 1px solid #bbb;
list-style-type: none;
background: #fff;
}

#navlist li
{
float: left;
margin: 0;
padding: 0;
width: auto;
display: block;
}

#navlist li a, #navlist li a:link
{
background: #fff;
color: #555;
text-decoration: none;
padding: 3px 5px 3px 5px;
display: block;
}

#navlist li a:hover
{
color: #039;
border-bottom: 3px solid #bbb;
cursor: pointer;
background: #eee;
}

#navlist li a#current, #navlist li a#current:link
{
color: #000;
cursor: default;
font-weight: bold;
border-bottom: 3px solid #999;
}

#navlist li a#current:hover
{
border-bottom: 3px solid #f90;
background: #eee;
}
#navlist li img 
{
clear:right;
flow:left;
}
</style>
</head>

<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" /><a href="#" id="current">Item one</a></li>
<li><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" /><a href="#">Item two</a></li>
<li><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" /><a href="#">Item three</a></li>
<li><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" /><a href="#">Item four</a></li>
<li><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" /><a href="#">Item five</a></li>
</ul>
</div>
</body>
</html>