如何减少导航链接间距

-1

我有一个导航栏，我希望它横跨页面，我有一个响应式布局（虽然这不反映在下面，我已经削减了我们的必要代码它构建了我的导航），并且在我的移动视图中，我希望导航栏可以下降到它的独立行。如何减少导航链接间距

但是我想要做的是在这些<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>

来源

2013-08-30 001221

的问题是，您使用display:inline。改用'float：left'。使用display:inline总会为我造成不需要的边缘。

来源

2013-08-30 14:00:32 Xarcell

@deathApril这些原因是什么，我想知道。 – Xarcell

原因是因为当你使一个对象内联时，它会将它当作一个句子中的单词来对待，并且会显示句子中单词之间的任何空格 - 对于任何内联元素之间的空格都将显示相同 – Pete

@Pete谢谢，很好知道。 – Xarcell

您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

来源

2013-08-30 13:59:33 j08691

如何减少导航链接间距

回答

相关问题