CODEWITHSUNDEEP
csscss-float
Jake
Jake

Reputation: 16837

CSS float styling

I have the following code:

<html>

<head>

<style>

div.menu
{
    float:left;
}

div ul.menu 
{
    border-style:solid;
    border-width:2px;
    float:left;
}

div li.menuitem
{
    float:left;
    margin:5px;
    color:red;
    background:green;
    padding:5px;
}

div li.menuitem:hover{
    background:yellow;
}

</style>

</head>

<body>

<div class="menu">
    <ul class="menu">
    <li class="menuitem"> first </li>
    <li class="menuitem"> second </li>
    <li class="menuitem"> third </li>
    </ul>
</div>

</body>

</html>

The result looks like :

enter image description here

What's causing the gap in the left of 'first' ?

Thanks.

Upvotes: 0

Views: 66

Answers (6)

arjen Stens
arjen Stens

Reputation: 113

you should add

padding: 0px;

to your div ul.menu

so it would look like this:

div ul.menu 
{
    border-style:solid;
    border-width:2px;
    float:left;
    padding: 0px;
}

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191729

Browsers add padding to <ul> and <ol> elements typically. You can set a -webkit-padding-start on Chrome, but it's probably easier to just use padding-left: 0 or padding: 0 on the <ul> element. Also look out for -webkit-margin-before and after.

You may also want to set: list-style-type: none

http://jsfiddle.net/7n4Xn/1

Upvotes: 2

frenchloaf
frenchloaf

Reputation: 1054

add padding: 0px; to your .menu class

Upvotes: 0

otinanai
otinanai

Reputation: 4025

You need to apply list-style:none and reset any paddings/margins to the ul. So the style of the ul becomes:

div ul.menu {
    border-style:solid;
    border-width:2px;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
}

Here's a demo.

Upvotes: 0

chris
chris

Reputation: 4867

I think it is because of the browsers default styles.
You could use an css-reset or normalize.css.

* {
    margin:0;
    padding:0;
}

Upvotes: 2

zurfyx
zurfyx

Reputation: 32757

ul by default creates some padding space on the left.

li ul{
    padding:0;
}

JSFiddle

Upvotes: 2

Related Questions