使用 css 删除 ul 上的空格

Question

我试图删除固定顶部菜单ul左侧的一些空白，但我被卡住了，我已经搜索并放置了这个：

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

我想将所有列表放在左侧（如left: 0 ？），但某些东西在第一个列表项的左侧产生了一些空白。

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

这是代码（小提琴）：

 #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>

Answer 1

DEMO

当您padding: 0;代码时padding: 0; 到#nav

Answer 2

添加padding:0; 和margin:0到<ul> 。

Answer 3

设置<ul>标签：

font-size: 0px;

使用<li>标记集：

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

其他解决方案： https ： //davidwalsh.name/remove-whitespace-inline-block

Answer 4

添加padding: 0; 到<ul> 。

Answer 5

默认情况下 ul 有一些 margin 和 padding 属性，因为它适用。 如果我们需要删除那些，那么我们需要应用以下条件

ul {
  margin:0;
  padding: 0;
}