0

http://jsfiddle.net/q8eDF/でメニューのスタイルを設定しようとしていますが、まだ完全ではありません。

.dropdown-container の赤い境界線を緑の領域 (つまり、メニュー全体) にも展開し、.dropdown-header の青い境界線を .dropdown-item (または .dropdown -item は、ヘッダーが最も幅の広い項目よりも幅が広い場合に .dropdown-header の境界まで拡張されます)、.dropdown-header と .dropdown-arrow の最後の文字の間に ~10px のスペースを許可しますか?

BCはどうでもいいです、今のFFとChromeで動かせれば大丈夫です。

HTML:

<div id="dd" class="dropdown-container">
  <div class="dropdown-header">Feed options<span class="dropdown-arrow">v</span></div>
  <div class="dropdown-items">
    <div class="dropdown-item">Reload</div>
    <div class="dropdown-item">Unsubscribe</div>
    <div class="dropdown-item">Reload from source</div>
  </div>
</div>

CSS:

.dropdown-container {
display: inline-block;
border: 1px solid red;
position: relative;
}
.dropdown-items {
display: block;
position: absolute;
z-index: 999;
background: #fff;
border: 1px solid green;
}
.dropdown-items {
margin: 5px 0px;
}
.dropdown-item {
margin: 3px 6px;
cursor: pointer;
}
.dropdown-header {
border: 1px solid blue;
width: 100%;
cursor: pointer;
}
.dropdown-arrow {
position: absolute;
right: 0;
}
4

1 に答える 1

1

ナビゲーションバーが必要な場合は、絶対に配置されたコンテナーに全体をラップして、他のコンテンツの上に浮かぶようにすることをお勧めします。

HTML

<div class="navbar">
    <div id="dd" class="dropdown-container">
        <div class="dropdown-header">
            Feed options<span class="dropdown-arrow">v</span>
        </div>
        <div class="dropdown-items">
            <div class="dropdown-item">Reload</div>
            <div class="dropdown-item">Unsubscribe</div>
            <div class="dropdown-item">Reload from source</div>
        </div>
    </div>
</div>

CSS

.navbar { 
    position: absolute; 
    top: 0px; 
}
.navbar > div { 
    display: inline-block; 
    vertical-align: top; 
}

body { 
    padding-top: 23px; 
}

.dropdown-container {
    display: inline-block;
}
.dropdown-header {
    width: 100%;
}
.dropdown-arrow {
    float: right;
}

フィドル

于 2013-09-26T12:18:27.217 に答える