删除li元素的空格

我正在尝试创建一个简单的水平导航。我已经彻底搜索了堆栈溢出，并找到了如何删除li元素之间的空白的几个答案。我尝试添加和删除html元素（在单行中写入li标签，并添加div标签）。我试着将我的li标签的'display：inline'属性改为'display：block'和'float：left'。我还尝试了其他一些堆栈溢出用户的建议。删除li元素的空格

没有为我工作。

我敢肯定，解决方案很简单，但我没有做任何事似乎正常工作。任何帮助是极大的赞赏。

我的HTML是：

<div class="nav"> 
<ul> 
<li><a href="#" class="active">One</a></li> 
<li><a href="#">Two</a></li> 
<li><a href="#">Three</a></li> 
</ul> 
</div>

我的CSS是：

.nav { 
    height: 56px; 
    width: 100%; 
    } 
.nav ul { 
    height: 100%; 
    float: right; 
    padding: 0px; 
    } 
.nav ul li { 
    height: 100%; 
    line-height: 56px; 
    background: transparent; 
    display: inline; 
    width: 100%; 
    padding: 0px; 
    } 
.nav ul li a { 
    color: #333; 
    text-transform: none; 
    text-decoration: none; 
    display: inline-block; 
    padding: 0 .5em; 
    background: transparent; 
    } 
.nav ul li a:hover { 
    color: #FFF; 
    text-transform: none; 
    text-decoration: none; 
    background: #333; 
    } 
.active { 
    color: #FFF !important; 
    background: #333 !important; 
    }

来源

2014-02-25 user3350469

尝试在的jsfiddle重现此。 –

那么，是否有任何答案可以解决它？请选择其中一个作为正确的答案，或告诉我们您的想法... –

使用浮动对齐元素和您的UL这里后，要清除他们是一个工作演示 http://jsfiddle.net/HarishBoke/dh5eZ/

HTML

<div class="nav"> 
    <ul class="clearfix"> 
     <li><a href="#" class="active">One</a>  </li> 
     <li><a href="#">Two</a></li> 
     <li><a href="#">Three</a></li> 
    </ul> 
</div>

CSS

.nav { 
    height: 56px; 
    width: 100%; 
} 
.nav ul { 
    height: 100%; 
    padding: 0px; 
    list-style:none; 
} 
.nav ul li { 
    height: 100%; 
    line-height: 56px; 
    background: transparent; 
    padding: 0px; 
    float:left; 
    background:#ccc; 
} 
.nav ul li a { 
    color: #333; 
    text-transform: none; 
    text-decoration: none; 
    display: inline-block; 
    padding: 0 .5em; 
    background: transparent; 
} 
.nav ul li a:hover { 
    color: #FFF; 
    text-transform: none; 
    text-decoration: none; 
    background: #333; 
} 
.active { 
    color: #FFF !important; 
    background: #333 !important; 
} 
.clearfix:before, .clearfix:after { 
    content:" "; 
    display: table; 
} 
.clearfix:after { 
    clear: both; 
}

来源

2014-02-25 10:19:43 Harish

您可以添加：

li { 
    margin:-2px; 
}

这将敲背的间距

EXAMPLE

来源

2014-02-25 10:10:30 SaturnsEye

为什么使用负余量，如果它可以通过正确的方式修复！ – Harish

@Harish总是很高兴有多个替代品作为回落 – SaturnsEye

，但避免使用负边距和位置在影响dom呈现缓慢 – Harish

让你离开浮<li>和删除宽度：

.nav ul li { 
    height: 100%; 
    line-height: 56px; 
    background: transparent; 
    float: left; 
    padding: 0px; 
    list-style:none; 
}

我还添加了“无”列表样式，如子弹会再次出现，一旦你删除的显示。

我不会使用负边距，因为上面是更优雅的解决方案，并且不那么令人困惑。恕我直言，负利润的黑客，只能作为最后的手段...

这里是我的小提琴：http://jsfiddle.net/5dBVg/1/

来源

2014-02-25 10:13:52

尝试加入的风格在风格里的标签。

li { 
    margin:-2px; 
}

来源

2014-02-25 10:14:51 joe

删除li元素的空格

回答

相关问题