to me this is really weird, i have this menu:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.menu{text-align:right;}
div.menu ul{
list-style:none;
display:inline;
}
div.menu li{
position:relative;
display:inline;
background:#434343;
padding:8px 12px;
line-height: 32px;
margin:0;
border-left:1px #000 solid;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li></li>
<li> </li>
<li></li>
<li>Hi</li>
<li>Hello </li>
<li></li>
</ul>
</div>
</body>
</html>
i'm using the latest chrome and firefox 3.6 for testing
there are 6 li but only 5 are shown, a space inside the li causes it not to be rendered
if there's a text inside it causes a 4px space
"hi" has a space after, "hello " doesn't
adding anchors inside the li causes the same behaviour
<li>Link</li>
has a space after
<li>Link </li>
doesn't
adding
div.menu li a:after{content:" ";}
in the code would solve the problem apparently but if you look closely the elements will appear wider except the last one
any help?
thank you
div.menu{text-align:right;}
div.menu ul{
float:right;
...
}
div.menu li{
float:left;
...
}
Looks fine to me:
Fiddle: http://jsfiddle.net/maniator/hgde9/show/
Chrome About:
Google Chrome 18.0.1017.2 (Official Build 118867) dev-m
OS Windows
WebKit 535.19 (#105663)
JavaScript V8 3.8.7.1
Update:
Add:
float: right;
height: 32px;
To div.menu li
Fiddle: http://jsfiddle.net/maniator/hgde9/1/show/
The problem is with display:inline. Two inline elements next to each other have a space between them if there is wehitespace in the source. Or if there is a space inside one of the elements. Whitespace collapses, so the space in "Hello " is folded with the space after it and ends up inside the li, while there is no whitespace in the "Hi", only after.
there is white space in the html, remove that and the gap will go! as in try this html
<ul><li></li><li> </li><li></li><li>Hi</li><li>Hello </li><li></li></ul>
and all will be revealed! (its nothing to do with CSS!)
Related
ok the code is listed below, and when I adjust the css as follows:
.Nav {
color:red;
float:left;
display:inline;}
It wont display inline? What Am I doing wrong? Im sure this is a stupid question.
<head></head>
<body>
<div class="Nav">
<ul>
<li>Home</li>
<li>Sign Up</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</body>
dont use float and dislay inline at the same time just use `
display:inline-block;
and it will work perfectly fine
i would also recommend you to read this article, it's a short article but helps a lot
click this to read the article
atleast it did help me a lot and cleared my concepts of float and display
It will. Your div is the one with the .Nav class so that div will be displayed inline. Try:
.Nav li{
display:inline;
}
Here is a jsfiddle example
.Nav ul li{
color:red;
display:inline;}
You can put display: inline on li elements, all they will be on a unique line.
As you can see here: http://jsfiddle.net/b31krn9b/
CSS:
.Nav {
color:red;
float:left;
}
.Nav li {
display:inline;
}
Another ways to align:
Using float: http://jsfiddle.net/b31krn9b/1/
Or even display: inline-block (this is better because you can use margin-right and left): http://jsfiddle.net/b31krn9b/2/
The div itself is displayed inline, but since it's the only element inside the body, it has no visible effect.
You need to set it on the li elements:
CSS
div.nav ul li {
float: left; /* All li elements inside the div.nav are floated to left... */
display: inline; /* ...and displayed inline – but it does not make sence,
since a floating element cannot be inline. */
}
HTML
<div class="nav">
<ul>
<li>Home</li>
...
Here is a css
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Jenware | Personalized Gifts</title>
<style type="text/css">
/* styles for navigation */
#nav {
background-color: #2322ff;
height: 3em;
width:70em;
}
#nav ul {
list-style:none;
margin: 0 auto;
}
#nav ul li {
font-weight: normal;
text-transform: uppercase;
float:left;
}
#nav ul li a {
display: block;
padding: .5em;
border: 1px solid #ba89a8;
border-radius: .5em;
margin: .25em;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>House</li>
<li>Baby</li>
<li>More</li>
<li>About</li>
</ul>
</div>
<!-- end #content -->
</body>
</html>
It appears as follows
where as if the css is following
}
#nav ul {
list-style:none;
margin: 0 auto;
float:left;
}
then following appears
I am unable to understand the behavior of float:left in above images.
Why in 2nd kind of css it is getting down one by one? where as in first one it is coming properly?
Ok, here's the problem with the second code. When you float:left; in the first case, you apply it to the <li> elements, so each <li> is floated to the left.
In the second case, you apply float:left; to the <ul> element. CSS does it's job correctly and floats the container to the left leaving the <li> elements inside unchanged. So they stack on top of each other like they normally do, because you haven't told them to do otherwise.
The reason drip and John didn't see the problem is that you didn't tell us that in the second case, you also remove float:left; from the <li> styles. In the future, it's super helpful if you create a jsFiddle like they did to show exactly the code you are using. Let me know if you need more explanation, I'll be happy to try and clarify it.
The normal behaviour of float is to resize the container size as per content/child length. In first scenario LI are coming in single line because the parent is able to provide them complete width.
But in the case of second one, UL gets resize as per its child witch has max width. And, hence they are appearing underneath each other.
The margin:0 auto and float:left seem to conflict. To center the nav, place margin:0 auto on #nav.
edit: forgot to mention to clear after the float.
edit: maybe i should've inquired why you'd want to float the ul in the first place.
So I have an unordered list with 7 items in it, they are displayed as inline and inside of the li there are empty anchor tags (I really need them to be empty and anchor tags).
Here's a link http://jsfiddle.net/FTHMf/2/.
Chrome only displays 6 of them, and I wonder why, firefox seems to display all 7.
Also, I don't want to use inline-block for various reasons.
Is there any way to fix this? What causes the problem?
Thank you!
HTML
<ul class="john">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
CSS
.john {
width:100%;
text-align:center;
}
.john li {
display:inline;
}
.john li a {
background-color:green;
line-height:0px;
font-size:0px;
padding:6px;
margin:0px 2px 0px 2px;
}
Chrome is not displaying the first element for whatever reason. Here is a that will not affect your HTML/layout in any way but beats me why is it happening - looks like a bug most definitely.
.john li:first-child a:after { position: absolute; content: ""; }
http://jsfiddle.net/chrisdanek/xW2e2/
#user1128245 Use this
.john li {
float:left;
}
This is the code for a horizontal <ul> that I'm using:
.list ul{
width: 100%;
}
.list li{
display: inline;
list-style-type: none;
padding-right: 20px;
padding-bottom: 20px;
}
Using this, if I do this:
<ul class="list">
<li>
<img src="myImg.png" />
<span class="edit"></span>
<span class="delete"></span>
</li>
</ul>
Then it all works, however if I put a <br> between the image and the edit/delete buttons, e.g:
<ul class="list">
<li>
<img src="myImg.png" />
<br />
<span class="edit"></span>
<span class="delete"></span>
</li>
</ul>
Then the list breaks, and I get the images in a vertical list instead of horizontal. Screenshot when its working:
Screenshot of when its not working:
Any ideas?
Replace the
display: inline
with
float: left
Example fiddle
The solution is to use: display:inline-block on your li element which then allows all other markup to function correctly, both in and out of your list.
inline-block: The element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element
Here is a jsfiddle showing an example.
The above jsfiddle is now edited to support older IE7 to work alongside modern browsers. The order of the .css for display is important. To throw in support for IE6, then additonal _height: 30px; where 30 is your required height needs to be added. But IE6 browser use is less than 1%.
Try to use for .list li { float:left; } instead { display:inline; } and will work.
I have a horizontal menu demo below using HTML and CSS. As you can see I have put a right border on the li tag to separate the menu options. However I don't wish to have a border on the last menu option so I have used a span style to try and stop it showing. However it does not appear to be working for me. Can anyone help?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#menu a {
text-decoration:none;
color:black;
font-weight:bold;
}
#menu ul {
display:inline;
list-style:none;
padding:0px;
}
#menu li {
display:inline;
margin:0px;
border-right: solid black thin;
padding-right:5px;
color:black;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>About</li>
<li>Service</li>
<li>Prices</li>
<span style="border-right:none"><li>Contact Me</li></span>
</ul>
</div>
</body>
</html>
Two problems:
A) You can't wrap a li inside a span, because lists (ol) can't contain anything else than li. (First thing to learn here is to allways validate your HTML code: http://validator.w3.org/)
B) The border is on the li, you are tying to remove the border from the span. You need to remove the border from the li itself, for example like this:
<li style="border-right:none">Contact Me</li>
However it's even easier if you directly define in the stylesheet that the last element shouldn't have a border:
#menu li:last-child {
border-right: none;
}
That way you don't need to worry yourself which li is the last one, even if you ever decide reorder the items or add new ones to the end.
You have to consider the li, not the span. Try this :
<span><li style="border-right:none">Contact Me</li></span>
That's because you have a li tag inside the span!
Just remove the li tag inside the span too and it will work. Eg here: http://jsfiddle.net/8cUmx/
remove span tag and add this css
#menu li:last-child {
border-right:none;
}