html - DIV列表链接拒绝触摸

Question

对于我正在构建的网站，我的链接不是 Start Class 和 Center class。我已经检查了好几次，看不出我做错了什么。有人可以帮我解决这个问题吗？

我的html

<DIV class="outline">
<DIV class="navigation">
<ul>
    <li class="orange start"><a href="">Home</a></li>
    <li class="orange center"><a href="">Forum</a></li>
</ul>
</DIV>
</DIV>

我的 Css 类

   /*Start Links*/

    a:link {
        color: #FFFFFF;
        text-decoration: none;
        margin: 0;
    }
    a:visited {
        color: #FFFFFF;
        text-decoration: none;
    }
    a:hover {
        color: #FFFFFF;
        text-decoration: none;
    }
    a:active {
        color: #FFFFFF;
        text-decoration: none;
    }
    .navigation  ul li {
        margin: 0px auto;
        display: inline-block;
    }
    /*End Links*/

    /*Start Button*/

    .start {
        display: inline-block;
        outline: none;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        font: 14px/100% Arial, Helvetica, sans-serif;
        padding: .5em 2em .55em;
        text-shadow: 0 1px 1px rgba(0,0,0,.3);
        -webkit-border-radius: .5em 0 0 .5em;
        -moz-border-radius:  .5em 0 0 .5em;
        border-radius: .5em 0 0 .5em;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        box-shadow: 0 1px 2pxrgba(0,0,0,.2);
        margin: 0px;
    }
    .center {
        display: inline-block;
        outline: none;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        font: 14px/100% Arial, Helvetica, sans-serif;
        padding: .5em 2em .55em;
        text-shadow: 0 1px 1px rgba(0,0,0,.3);
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        box-shadow: 0 1px 2pxrgba(0,0,0,.2);
        margin: 0;
    }

    .button {
        display: inline-block;
        outline: none;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        font: 14px/100% Arial, Helvetica, sans-serif;
        padding: .5em 2em .55em;
        text-shadow: 0 1px 1px rgba(0,0,0,.3);
        -webkit-border-radius: .5em;
        -moz-border-radius: .5em;
        border-radius: .5em;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        box-shadow: 0 1px 2pxrgba(0,0,0,.2);
    }
    .button:hover {
        text-decoration: none;
    }
    .button:active {
        position: relative;
        top: 1px;
    }
    .orange {
        color: #fef4e9;
        border: solid 1px #da7c0c;
        background: #f78d1d;
        background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
        background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
    }
    .orange:hover {
        background: #f47c20;
        background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
        background: -moz-linear-gradient(top,  #f88e11,  #f06015);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
    }
    .orange:active {
        color: #fcd3a5;
        background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
        background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
    }
    /*End Button*/

    /*Start Website*/
    body {
        background-color: #393939;
        color: #FFFFFF;
        padding: 0;
        margin: 0;
    }
    .header {
        display: inline-block;
        width: 100%;
        text-align: left;
        border:solid 2px red;
    }
    .circle {
        float: left;
        width: 100px;
        height:100px;
        display: inline-block;
        background: #FF5A09;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    .header h1.first {
        margin-top: 30px;
        margin-left: -92px;
        margin-right: 5px;
        display: inline-block;
        color: #FFFFFF;
    }
    .header h1.last {
        display: inline;
        color: #FF5A09;
    }
    .header .right {
        display: block;
        height: auto;
        float: right;
        padding: 10px 10px 10px 10px;
        border-left: solid 2px red;
    }
    .navigation {
        margin: 0 auto;
        display: inline-block;
        width: 100%;
        text-align: center;
    }
    .outline {
        display: block;
        margin: 0 auto;
        width: 980px;
        border: solid 2px red;
    }
    .content {
        display: inline-block;
        width: 60%;
        border: solid 2px red;
        margin: 0 auto;
    }
    .footer {
        display: block;
        width: 100%;
        border: solid 2px red;
        padding: 10px 0 10px 0;
        text-align: center;
    }
    /*End Website*/

    /*Start slider*/

    /*End slider*/

Answer 1

这是因为<li>之间的空格元素很重要。如果删除所有空格，元素将彼此相邻。要么你只是这样做:

<li class="orange start"><a href="">Home</a></li><li class="orange center"><a href="">Forum</a></li>

或者，如果你想在代码中保留换行符，我通常认为这是一件好事，你可以像这样插入一个 HTML 注释:

<li class="orange start"><a href="">Home</a></li><!--
--><li class="orange center"><a href="">Forum</a></li>

这是一个品味问题，但我倾向于后者，因为我发现它更具可读性。