Remove white space on ul with css
Asked Answered
A

5

6

I'm trying to remove some white space on the left of a fixed top menu ul but I'm stuck, I already searched and put this:

#nav li {
    list-style: none;
    display: inline-block;
}

I want to put all the list at the left (like left: 0?), but something is producing some white space on the left of the first list item.

Why is this happening, and how can I remove it?

Here is the code (fiddle):

#contenedormenu {
  background-color: #FFFFFF;
  width: 100%;
  position: fixed;
  top: 0px;
  box-shadow: 0px 1px 2px #888;
  height: 40px;
  z-index: 1;
}
#menu {
  width: 100%;
  height: 40px;
  position: fixed;
  top: 0px;
}
#nav {
  width: 100%;
  height: 40px;
  top: 0px;
  position: fixed;
  margin-top: 0px;
}
#nav li {
  margin-top: 10px;
  list-style: none;
  display: inline-block;
}
#nav li a {
  color: #5D5D5D;
  font-family: Lobster, Arial, sans-serif;
  font-size: 16px;
  padding: 10px 5px 12px 5px;
  text-decoration: none;
  text-shadow: rgba(255, 255, 255, 0.6) 1px 1px 0;
}
#nav a:hover {
  background-color: #f15a24;
  color: white;
  text-shadow: none;
}
<div id="contenedormenu">
  <div id="menu">
    <ul id="nav">
      <li id="inicio">
        <a href="#home" title="Home">Home</a>
      </li>
      <li id="item1">
        <a href="#home">Menu item 2</a>
      </li>
      <li id="item2">
        <a href="#home">Menu Item 3</a>
      </li>
    </ul>
  </div>
</div>
Akee answered 16/6, 2013 at 3:22 Comment(0)
R
10

DEMO

As you code padding: 0; to the #nav

Rennarennane answered 16/6, 2013 at 3:26 Comment(1)
its says i need to wait 3 more minutes :oAkee
G
8

add padding:0; and margin:0 to the <ul>.

Genuflection answered 16/6, 2013 at 4:3 Comment(0)
B
7

With <ul> tag set:

font-size: 0px;

With <li> tag set:

font-size: 14px; /*or custom*/

Other solution: https://davidwalsh.name/remove-whitespace-inline-block

Brucine answered 23/5, 2017 at 19:24 Comment(0)
B
5

Add padding: 0; to the <ul>.

Bratton answered 16/6, 2013 at 3:24 Comment(0)
D
1

By default ul have some margin and padding property due to that it apply. If we need to remove those then we need to apply below condition

ul {
  margin:0;
  padding: 0;
}
Delgadillo answered 11/4, 2022 at 8:16 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.