CODEWITHSUNDEEP
htmlcsslist
user2647939
user2647939

Reputation:

CSS: Make the distance between bullets inside navigation menu smaller

I have a small problem with a styling my navigation menu.

So here is my HTML file:

<ul class="main-ul">
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>Article</span></a></li>
    <li><a href="#"><span>Blog</span></a></li>
    <li><a href="#"><span>Gallery</span></a></li>
    <li><a href="#"><span>Contcts</span></a></li>
</ul>

And here is my CSS file:

.main-ul li {
    float: left;
    position: relative;
    width: 10%;
    text-align: center;
    padding-left: 100px;
}
.main-ul li a {
    display: block;
    padding-bottom: 5px;
    padding-right: 10px;
    padding-top: 1px;
    padding-left: 10px;
    text-decoration: none;
    position: relative;
    z-index: 100;
    background-color: rgba(164, 164, 164, 0.2);
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.main-ul li a span {
    display: block;
    padding-top: 10px;
    font-weight: 700;
    font-size: 20px;
    color: rgba(120, 120, 120, 0.9);
    text-transform: uppercase;
    font-family: 'Kotta One', serif;
}

So if you insert it in CSS Desk or any other online CSS editor you can see that distance between bullets in my navigation menu is big. I just can't understand why. Can anyone tell me what am I doing wrong and how can I make this distance smaller?

Thanks.

Upvotes: 0

Views: 346

Answers (3)

p e p
p e p

Reputation: 6674

That's caused by padding-left of 100px in

.main-ul li {
    float:left;
    position:relative;
    width:10%;
    text-align:center;
    padding-left:100px;
}

Change that to a smaller number to decrease the spacing.

Upvotes: 0

Eliran Malka
Eliran Malka

Reputation: 16263

The li elements are declared with an exagerrated left padding. Have a smaller value and the problem is fixed:

.main-ul li {
    padding-left: 10px;
}

You may also want to change the width to prevent content from bleeding to the right, e.g.:

.main-ul li {
    width:150px;
}

Here's a live demo.

Upvotes: 1

Whistletoe
Whistletoe

Reputation: 573

You have set the left padding for the 'li'-elements to 100px. Use margin instead if you want an indented list.

Upvotes: 1

Related Questions