-1

以前にこれに遭遇したことを覚えていますが、回避策を思い出すほど強調することはできません..簡単にするためにいじったこのドロップダウンメニューがあります。問題は、ドットの上にカーソルを置くと、子要素がどのように折り返され、1 行に表示されないかを確認できることです。どうすれば正常に見えるようになりますか?

http://jsfiddle.net/N45P7/

HTML

<div class='addedForDisplayPurposes'>
    <div class="optionsList"> <span>•&lt;/span>

        <div class="optionsHolder">
            <div data-id="asdasd" class="socInt">Add Friend</div> <a href="#">Send Message</a>

        </div>
    </div>
</div>

CSS

.addedForDisplayPurposes {
    width:300px;
}
.optionsList {
    display:inline-block;
    position:relative;
    cursor:pointer;
    float:right;
}
.optionsList > span {
    font-size:20px;
    color:black;
}
.optionsList:hover > span {
    color:white;
}
.optionsList:hover .optionsHolder {
    display:inline-block;
}
.optionsHolder {
    position:absolute;
    display:none;
    top:0;
    right:0;
    background:white;
    border:solid black 1px;
    padding:5px 0 5px 0;
    z-index:3;
}
.optionsHolder > * {
    padding:5px 10px 5px 10px;
    font-weight:bold;
}
.optionsHolder > *:hover {
    background:black;
    color:white;
}
4

2 に答える 2

1

これらの変更を行うと、問題が解決されます。

.optionsHolder {
    position: absolute;
    display: none;
    top: 15px;
    right: 0;
    background: white;
    border: solid black 1px;
    padding: 5px 0 5px 0;
    z-index: 3;
    width: 140px;
}

編集

に変更を加えることができない場合は、テキストを 1 行に折り返すために をwidth追加します。white-space:nowrap;

例えば、

.optionsHolder {
    position: absolute;
    display: none;
    top: 15px;
    right: 0;
    background: white;
    border: solid black 1px;
    padding: 5px 0 5px 0;
    z-index: 3;
    white-space:nowrap;
}

これが今役立つことを願っています。

于 2013-08-26T11:21:06.620 に答える