-1

我有一个导航栏，我希望它在页面上伸展，我有一个响应式布局（虽然这没有反映在下面，我已经削减了构建导航的必要代码）和我的移动视图我希望导航栏下拉到它所做的单独一行。

但是我想要做的是在这些<a>标签上有一个背景颜色，但要创造一种将它们连接在一起的效果。

我尝试使用填充，但这对我不起作用，它反而增加了整体高度，有什么想法吗？

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

或在这里查看我的 jsfiddle

测试.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>
4

2 回答 2

2

删除 li 元素之间的空格。

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

jsFiddle 示例

<!-- -->或者在列表项之间放置 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 示例

于 2013-08-30T13:59:33.057 回答
1

问题是您使用display:inline. 请改用“浮动：左”。由于未知原因，使用display:inline总是会产生不需要的边距。

于 2013-08-30T14:00:32.990 回答