0

これが私のメニューです -

<div ><ul id="menu">
        <li class="one"><a href="http://www.domain.com">Dashboard</a></li>
        <li class="two"><a href="<?php echo bp_loggedin_user_domain() ?>">Profile</a></li>
        <li class="three"><a href="<?php echo bp_loggedin_user_domain() ?>messages">Messages</a></li>
        <li class="four"><a href="<?php echo bp_loggedin_user_domain() ?>friends">Friends</a></li>
        <li><?php bp_adminbar_notifications_menu() ?>
        <ul>
        <li> </li>
        </ul>
        </li>
    </ul>

これはCSSです -

ul#menu li {
    list-style: none;
    float: left;
    margin: 0 0px 0 0;
    background-color: #F8FCFE;
    position: relative;
    z-index: 1;
    border-top-left-radius: 10px 10px;
    border-bottom-left-radius: 10px 10px;

}

ul#menu li a:link, ul#menu li a:visited {
    display: block;
    text-align: center;
    width: 88px;
    height: 53px;
    line-height: 53px;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    font-size: 13px;
    color: black;
    letter-spacing: 1px;
    outline: none;
    float: left;
    background: #F8FCFE;
    border-top-left-radius: 10px 10px;
    border-bottom-left-radius: 10px 10px;
}

私が望むのは、左のアイテムに左上、左下の半径を持たせ、最後のアイテムに右上と右下に半径を持たせることです。したがって、丸みのある角を持つ垂直の長方形のように見えます。

4

4 に答える 4

0

最初と最後のクラスにとliなどの異なるクラスを設定します。最初は左上と下、最後は右上と下です。firstlast

li.first {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px; }

li.last {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px; }

メニュー

<ul id="menu">
<li class="one first"><a href="http://www.domain.com">Dashboard</a></li>
<li class="two"><a href="<?php echo bp_loggedin_user_domain() ?>">Profile</a></li>
<li class="three"><a href="<?php echo bp_loggedin_user_domain() ?>messages">Messages</a></li>
<li class="four"><a href="<?php echo bp_loggedin_user_domain() ?>friends">Friends</a></li>
<li class="last"><?php bp_adminbar_notifications_menu() ?></li>
</ul>
于 2012-04-27T16:40:47.473 に答える
0

html：

<ul id="menu">
    <li class="one"><a href="http://www.domain.com">Dashboard</a></li>
    <li class="two"><a href="<?php echo bp_loggedin_user_domain() ?>">Profile</a></li>
    <li class="three"><a href="<?php echo bp_loggedin_user_domain() ?>messages">Messages</a></li>
    <li class="four"><a href="<?php echo bp_loggedin_user_domain() ?>friends">Friends</a></li>
    <li class="five"><?php bp_adminbar_notifications_menu() ?>
    <ul>
    <li> </li>
    </ul>
    </li>
</ul>

css：

ul#menu li {
list-style: none;
float: left;
margin: 0 0px 0 0;
background-color: #F8FCFE;
position: relative;
z-index: 1;
border-top-left-radius: 10px 10px;
border-bottom-left-radius: 10px 10px;
overflow:hidden;}

ul#menu li.one {border-radius: 10px 0px 0px 10px;}

ul#menu li.five {border-radius: 0px 10px 10px 0px;}

アイテムごとのコーナーは、左上、右上、右下、左下のように時計回りに指定できます。

コピーしてcssに直接貼り付けるように修正されました。

于 2012-04-27T16:41:59.253 に答える
0

CSS3 では、特定の子のスタイルを定義できます。例えば：

#menu li:last-child {
 // some def
}

#menu li:first-child {
 // some other definition
}

お役に立てれば。

于 2012-04-27T18:28:13.217 に答える
0

このjsFiddleの例のようなものはどうですか?

HTML は変更せず、CSS を次のように更新しました。

ul#menu li {
    list-style: none;
    float: left;
    margin: 0 0px 0 0;
}

li.one a{
    border:2px solid #999;
    border-top-left-radius: 10px 10px;
    border-bottom-left-radius: 10px 10px;
    border-right:none;
}
li.two a, li.three a {
    border-top:2px solid #999;
    border-bottom:2px solid #999;
}
li.four a{
    border:2px solid #999;
    border-top-right-radius: 10px 10px;
    border-bottom-right-radius: 10px 10px;
    border-left:none;
}

ul#menu li a:link, ul#menu li a:visited {
    display: block;
    text-align: center;
    width: 88px;
    height: 53px;
    line-height: 53px;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    font-size: 13px;
    color: black;
    letter-spacing: 1px;
    outline: none;
    float: left;
    background: #ccc;

}​
于 2012-04-27T16:50:18.280 に答える