3

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

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

jsFIDDLE：http: //jsfiddle.net/asRz3/1/

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');

}
4

5 回答 5

4

You are using display: inline-block; so use margin-left: -4px; for .navbar-menu2

Demo

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

Because when you use display: inline-block; it leaves a 4px white space between the elements, to get over this, you need to use margin-left: -4px;

于 2013-09-02T18:40:10.023 回答
2

I've updated you fiddle.

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

The thing is, you had whitespaces between your a in your html. (new line is treated as whitespace in inline-block element)

you can fix is in numerous ways.

  1. Remove all white spaces from your html (as I did in your fiddle)

  2. Apply 'font-size: 0;' to the container (and then reaplly font size for each element who tries to write somthing)

  3. Aplly negative margin (not recomended, because the space is deferrent between browsers)

于 2013-09-02T18:42:08.000 回答
1

您看到的空白是由换行引起的。

这是由内联<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/

于 2013-09-02T18:44:46.930 回答
0

这是使用内联块时的已知问题。删除 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 技巧文章，您可以阅读有关此已知问题的信息

于 2013-09-02T18:38:29.363 回答
-1

你可以删除

padding-left: 10px;

从CSS

于 2013-09-02T18:38:55.730 回答