CSS发布导航按钮_Css_List_Html Lists

CSS发布导航按钮

css list

CSS发布导航按钮,css,list,html-lists,Css,List,Html Lists,嗨，我有一些CSS问题我的问题是，我的导航栏按钮只是通过移动样式表中的CSS代码来改变。我似乎也不能让我的边界只在第一个孩子身上工作，因为它对第一个和最后一个孩子都很重要下面是我的问题的一个例子，样式表代码块移动会影响结果所有代码相同但输出不同：我还收到了以下错误，使我的边界权利工作在：第一个孩子（唯一）如前所述，我确实有 li:last-child { border-right: 0px; position: relative; padding: 1

嗨，我有一些CSS问题
我的问题是，我的导航栏按钮只是通过移动样式表中的CSS代码来改变。我似乎也不能让我的边界只在第一个孩子身上工作，因为它对第一个和最后一个孩子都很重要下面是我的问题的一个例子，样式表代码块移动会影响结果

所有代码相同但输出不同：

我还收到了以下错误，使我的边界权利工作在：第一个孩子（唯一）

如前所述，我确实有

li:last-child {
    border-right: 0px;
    position: relative;
    padding: 15px;
    padding-right: 20px;
    padding-left: 12px;
    top: 10px;
}

li:first-child {
    padding: 37px;
    padding-bottom: 12px;
    position: relative;
    top: 10px;
    width: 150px;
    right: 25px;
    margin-left: -15px;
    border-right: #525252 1px solid;
}

但是它似乎不在这个页面上工作。

那怎么办

<body>
    <div id="wrapper">
        <ul>
            <li><a href="ReviewPage.aspx">Review</a></li>
            <li><a href="#.aspx">Your Reviews</a></li>
        </ul>
    </div>
</body>

你在找什么

编辑：

我忘了这一点，sry你的结构就是它本身。您不能直接在

ul

下使用

。我已经改变了一点方法，但所需的输出已经实现，在任何情况下都不会改变

链接到小提琴：

HTML:

ulli{右边框：1px实心#ddd！重要；}

只需在代码中应用这些css。使用主导航类并应用这些css，无论哪种方式，您的HTML都是无效的。ul
的唯一允许的直接子项是li
。将锚定链接放在li
中，第一小提琴手似乎有两个li:first child
规则，声明块几乎相等，而第二小提琴手有一个li:last child
规则。这可能是问题所在吗？我刚刚注意到，没有，这仍然是同一个问题，更新版-@ByronMcGrath注意Paulie_D关于ul
和li
的说法，因为你所做的确实是相当错误的。更新版的fiddle的CSS仍然与第二个版本的CSS不匹配；li:last child规则包含完全不同的声明。
#wrapper > ul{
    display: inline-block; /*Size to content*/
    height: 45px;
    list-style: none;
    background-color: #242424;
    font-family: 'Lobster', cursive;
    padding: 0; /*essential*/

    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}
#wrapper > ul > li{
    display: inline-block;
    line-height: 45px;
    padding-left: 25px;
    padding-right: 25px;
    border-right: #525252 1px solid;
}



#wrapper > ul > li:last-child {
        border-right: 0px;
}
#wrapper > ul > li > a:hover{
    color: #20a7b0;
}

#wrapper > ul > li > a{
    color: #808080;
}

<body>
    <div id="Wrapper">
        <div id="Nav">
            <ul>
                <li><a href="ReviewPage.aspx">Review</a>
                </li>
                <li><a href="#.aspx">Your Reviews</a>
                </li>
            </ul>
        </div>
    </div>
</body>

ul {
    list-style: none;
    padding:0;
    margin:0;
    text-indent:0;
    position: relative;
    background-color: transparent;
    font-family:'Lobster', cursive;
}
#Nav {
    height: 45px;
    width: 240px;
    margin-top: 0px;
    background-color: #242424;
    margin-left: auto;
    margin-right: auto;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
li {
    display: inline-block;
    position: relative;
    text-align: center;
    background-color: transparent;
    cursor: pointer;
}
li a{
    display:inline-block;
    color: #808080;
    padding:11px 21px;
    text-decoration:none;
    border-right: #525252 1px solid;
}

li:last-child a{
    border-right:none;
}

li a:hover {
    color: #20a7b0;
}