用css清除ul上的空格 [英] Remove white space on ul with css

问题描述

我试图删除固定顶级菜单左下方的一些空白区域 ul ，但是我被卡住了，我已经搜索过并且放了这个：

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

我想把所有列表放在左边（例如 left：0 ？），但是在第一个列表项左边产生了一些空格。

为什么会发生这种情况，以及如何删除它？

以下是代码（小提琴）：

#contenedormenu {background-color：#FFFFFF;宽度：100％;位置：固定; top：0px; box-shadow：0px 1px 2px＃888; height：40px; z-index：1;}＃menu {width：100％; height：40px;位置：固定; top：0px;}＃nav {width：100％; height：40px; top：0px;位置：固定; margin-top：0px;}＃nav li {margin-top：10px; list-style：none; display：inline-block;}＃nav li a {color：＃5D5D5D; font-family：龙虾，Arial，sans-serif; font-size：16px; padding：10px 5px 12px 5px;文字修饰：无; text-shadow：rgba（255,255,255,0.6）1px 1px 0;}＃nav a：hover {background-color：＃f15a24;白颜色; text-shadow：none;}

< div id = contenedormenu > < div id =menu> < ul id =nav> < li id =inicio> < a href =＃hometitle =Home>主页< / a> < /锂> < li id =item1> < a href =＃home>菜单项目2< / a> < /锂> < li id =item2> < a href =＃home>菜单项目3< / a> < /锂> < / UL> < / div>< / div>

解决方案

DEMO

由于您的代码 padding：0; 到 #nav

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>

解决方案

DEMO

As you code padding: 0; to the #nav

这篇关于用css清除ul上的空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！