Question

您好我有一些CSS问题我的问题是我的导航栏按钮只是通过移动样式表中的CSS代码而改变。我似乎也无法让我的边界权利只在第一个孩子上工作，因为它算在第一个和最后一个孩子身上以下是我的问题示例，其中样式表代码块移动会影响结果。

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

http://jsfiddle.net/kyF3m/6/
http://jsfiddle.net/PsX27/

我也接受了以下错误：让我的右边界工作：firstchild（仅限）

The successful Result

The failed result

如上所述，我确实有

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;
}

但似乎它无法在此页面上运行。

Answer 1

你的结构本身。您无法直接在a下使用ul。我已经改变了一点方法，但是已经实现了所需的输出，并且在任何条件下都不会改变。

链接到小提琴：http://jsfiddle.net/PsX27/50/

HTML：

<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>

CSS：

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;
}

Answer 2

怎么样？

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

和

#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;
}

我忘记了，sry

Answer 3

ul li{border-right:1px solid #ddd !important;}

<b>just apply these css n your code. take the main class of navigation and apply these css</b>

CSS发布导航按钮

3 个答案: