0

次のようなヘッダーナビゲータータブがあります

画像

以下のようなスタイルで

.navigation {
    border: 1px solid red;
    border-bottom: 0 none;
    border-radius: 8px 8px 0 0;
    color: #264B9B;
    padding-bottom: 1px;
}

をドロップするpadding-bottom: 1px;と、イメージ

画像

左下のパディングは問題ないように見えますが、右下のパディングは正しくありません。

このスタイリングを修正するには？

編集: jsfiddleの html ソース

4

1 に答える 1

1

これを試して：

HTML

<div class="navigation">
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS

.navigation {
    border: 1px solid red;
    border-bottom: 0 none;
    border-radius: 8px 8px 0 0;
    color: #264B9B;
    width:100px;
    height:80px;
    position:relative;
}
.navigation div{
    border-left: 1px solid red;
    width:100px;
    height:8px;
    bottom:-8px;
    position:absolute;
}
.left{
    border-radius:0;
    right:0px;
}
.right{
    border-radius:0 0 0 8px;
    right:-101px;
}

例： http: //jsfiddle.net/ujC95/

于 2012-08-21T12:35:21.130 に答える