Question

我有一个空间beetwin我的导航链接它约2px我无法删除它，是否可以做到它的anny css代码？

将鼠标悬停在“下载”上时，您可以看到左侧的空格。

HTML：

<?php
?>
<!DOCTYPE>
<html>
<head> 
    <!--- START Styles --->
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css"/>
    <link rel="stylesheet" href="index.css" type="text/css" />
    <!--- END Styles --->
    <!--- START Scripts --->
    <script type="text/javascript" src"js/bootstrap.js"></script>
    <!--- END Scripts --->
</head>
<body>
    <!--- NavBar TOP --->
    <nav class="navbar navbar-custom" role="navigation">
            <a href="#" class="navbar-menu">F.A.Q's</a>
            <a href="#" class="navbar-menu2">Latest News</a>
            <a href="#" class="navbar-menu2">Downloads</a>
            <a href="#" class="navbar-menu2">Client Login</a>
            <a href="#" class="navbar-menu2">Contact Us</a>
    </nav>
</body>
</html>

CSS：

.navbar-custom {
    background-image: url('img/navbar-custom.png');
    height: 60px;
    border-radius: 0px;
    margin-bottom: 0px;
}
.left-nav-space {
    height: 70px;
    width: 200px;   
}
.navbar-menu {
    height: 59px;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 900;
    font-size: 12px;
    position: relative;
    display:inline-block;
    color: #FFF;
    padding-top: 20px;
    list-style: none;
    padding-bottom: 24px;
    text-align: center; 
    border-right: 2px solid #282828;
    border-left: 2px solid #282828;
    text-decoration: none !important;
}
.navbar-menu:hover {
    background-image: url('img/navbar-menu-hover.png');
}
.navbar-menu2 {
    height: 59px;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 900;   
    font-size: 12px;
    position: relative;
    display: inline;
    list-style: none;
    color: #FFF;
    padding-top: 20px;
    padding-bottom: 24px;
    text-align: center; 
    border-right: 2px solid #282828;
    text-decoration: none !important;
}
.navbar-menu2:hover {
    background-image: url('img/navbar-menu-hover.png');

}

Answer 1

您正在使用display: inline-block;，因此请margin-left: -4px;使用.navbar-menu2

Demo

.navbar-menu2 {
    margin-left: -4px;
    /* Other Styles */
}

因为当您使用display: inline-block;时，它会在元素之间留下4px个空格，为了克服这个问题，您需要使用margin-left: -4px;

Answer 2

我已经更新了你。

http://jsfiddle.net/avrahamcool/asRz3/8/

问题是，你的html中的a之间有空格。（新行被视为inline-block元素中的空格）

你可以通过多种方式解决问题。

从html中删除所有空格（就像我在你的小提琴中所做的那样）
应用'font-size：0;'到容器（然后为每个试图写东西的元素重新获得字体大小）
Aplly负边距（不推荐，因为浏览器之间的空间不一致）

Answer 3

您看到的差距是由换行引起的。

这是由内联<a></a> <a></a>空格引起的。

<nav class="navbar navbar-custom" role="navigation"><a href="#" class="navbar-menu">F.A.Q's</a><a href="#" class="navbar-menu2">Latest News</a><a href="#" class="navbar-menu2">Downloads</a><a href="#" class="navbar-menu2">Client Login</a><a href="#" class="navbar-menu2">Contact Us</a></nav>

虽然这很难看。我想使用花车吗？

http://jsfiddle.net/asRz3/12/

Answer 4

使用内联块时这是已知问题。删除html中的li之间的空格，如下所示：

<ul>

<li> 
<a href="#">Link here.</a> 
</li><li> 
<a href="#">Link here.</a> 
</li><li> 
<a href="#">Link here.</a> 
</li>

</ul>

这是jsfiddle 这是css tricks文章，你可以阅读这个已知问题

Answer 5

您可以删除

padding-left: 10px;

来自css

导航中左侧不必要的空间

5 个答案: