0

1 つの単語をクリックできるテキストがあり、クリックすると、項目のドロップダウン リストがテキストの上に表示されます (テキストは同じ場所に留まります)。

位置付けが簡単だと思うので、順序付けられていないリストの代わりにdivを使用することを考えていました。しかし、私はあらゆる種類のソリューションに対してオープンです。

HTML:

This is a sentence, with a 
<div class="dropdown-list">
    Clickable Word
    <div>List Item 1</div>
    <div>List Item 2</div>
    <div>List Item 3</div>
</div>. Plus some more text to fill the page.

CSS:

.dropdown-list {
    display: inline-block;  
}

jsFiddle http://jsfiddle.net/hLyaf/8/でわかるように、divの高さが変更され、テキストの上にドロップダウンするのではなく、行全体の高さが拡張されます。

望ましい効果を達成する方法はありますか？

4

1 に答える 1

1

私があなたのために作ったこのチュートリアルを使ってください

http://jsfiddle.net/hLyaf/12/

body {
    font-size: 20px;
}
.dropdown-list {
    display: inline-block !important;
    background: #ccc;
    position:relative;
}
.dropdown-list div.drop {
    display: none;
    width:100%;
    position:absolute;
    left:0;
    top:100%;background: #ccc;
}
于 2013-07-31T08:09:23.357 に答える