Question

我有一个导航栏，我希望它能够在整个页面上展开，我有一个响应式布局（虽然这不会在下面反映出来，但我已经切断了构建导航的必要代码）并且我的移动视图我希望导航栏下拉到一个单独的行。

但是，我想要做的是在这些<a>标签上使用背景颜色，但要创建它们连接在一起的效果。

我试过使用填充但是这对我来说没有用，它反而增加了整体高度，任何想法？

我的代码如下，任何帮助将不胜感激

或查看我的jsfiddle here

test.html

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>iManage</title>
    <style>
    @charset "utf-8";
    /* CSS Document */
    /********************************
    * CSS Reset                     *
    *********************************/
    html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {
        display: block;
    }

    body {

        line-height: 1;
        background-color:#EEEEEE;
            font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

    }

    ol, ul {
        list-style: none;
    }

    blockquote, q {
        quotes: none;
    }

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }


    /* Styles */
    header h1 {
    font-size:20px;
    text-align:center;

    }

    header nav {
        width:100%;
        background-color:#232527;

    }

    .maina > li  {

    }

    header nav a:link {
    font-size:12px;
    font-size:12px;
    width:120px;
    padding:10px;
    display:inline-block;
    background-color:#98bf21;
    }


    header {
    width:auto;
    min-height:50px;
    background-color:#374348;
    }

    header > h1 {
        font-size:24px;
        font-weight:300;
        color:#FFF;
        padding:10px;
        font-family: 'Oxygen', sans-serif;  
    }

    .main a {

    }

    .maina > li  {
        display:inline; 
        list-style:none;    
    }

    header > nav {
        font-family: 'Oxygen', sans-serif;
        text-align:center;
        height:auto;
        border:medium #999;
        float: left;
    }

    .clear:after {
        content: "";
        display: table;
        clear: both;
    }

    header nav a:link {
    color:#CCC;
    text-decoration:none;
    font-weight:bold;
    border:medium #CCC; 
    }

    header nav a:visited {
    color:#FFF;
    }


    header nav a:active {
    color:#7e7975;
    }

    header nav a:hover {
    text-decoration:underline;
    }
    </style>
    </head>


    <body>
    <div id="wrapper">
    <header class="clear">
    <h1>iManage</h1>
      <nav>
            <ul class="maina">
                <li><a href="index">Home</a></li>
                <li><a href="Projects">Projects</a></li>
                <li><a href="Settings">Settings</a></li>
            </ul>
        </nav>
    </header>

    <div id="maincontentWrapper">


    </div>

Answer 1

删除li元素之间的空白区域。

<li><a href="index">Home</a></li><li><a href="Projects">Projects</a></li><li><a href="Settings">Settings</a></li>

<强> jsFiddle example

或者在列表项之间添加HTML注释（）：

<ul class="maina">
    <li><a href="index">Home</a></li><!--
 --><li><a href="Projects">Projects</a></li><!--
 --><li><a href="Settings">Settings</a></li>
</ul>

<强> jsFiddle example

Answer 2

问题在于您使用display:inline。请改用“float：left”。使用display:inline总是会因为未知原因而为我创建不需要的边距。

如何减少导航链接之间的间距

2 个答案: