Hi,
I am using the following CSS to produce a horizontal menu for the new system I'm working on. The code look like this [syntax=css]nav {
border: #000000 thin solid;
color: #FFFFFF;
width: 100%;
background: #000056;
}
nav ul {
margin: 0; padding: 0;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
text-decoration: none;
color: #FFFFFF;
padding-right: 30%;
}
nav ul li a:hover {
color: #FFFF00;
}[/syntax]My problem is, however, that when I use float:left for the nav ul li element, it shows the border as a single line with the links underneath but when I use display: inline-block it shows the links on the blue background. What I am trying to achieve is to have the links at the top of the page, on a dark blue background, with each link having space between it. Not sure what I'm doing wrong
Float left doesn't work yet display inline block does
-
- Posts: 66
- Joined: Thu Jan 12, 2012 3:54 pm
- Contact:
Re: Float left doesn't work yet display inline block does
If you have a float:left element it will not expand to the size of the contents by default, you can make it expand by adding overflow:auto as well.
[syntax=css]nav ul li {
float: left;
overflow: auto;
}[/syntax]
It's a bit of a weird trick since auto is the default, but it works
[syntax=css]nav ul li {
float: left;
overflow: auto;
}[/syntax]
It's a bit of a weird trick since auto is the default, but it works