0

ウィジェットを作成しました。ハイライトされた単語をマウスダウンすると、メニューがポップアップします。ドラッグして選択し、放します。メニューがアンポップします。

ウィジェットは正常に機能しますが、クリック/ドラッグすると、ウィジェット要素のサイズが変更され、移動しますが、これは望ましい動作ではありません。CSS は非常に単純なので、どこから始めればよいかわかりません。

これがフィドルです。http://jsfiddle.net/monsto/JfWQ3/1/

ここにCSSがあります

body {margin:25px;}
li {cursor: pointer; display: inline-block; border:1px solid black; position:relative;height:20px;}
.del {display: none;background-color: red; width:50%; float:left;text-align:center;position:relative;}
.save {display: none;background-color: green;width:50%; float:right;text-align:center;position:relative;}
.word {display: inline-block;}​

そしていくつかのhtml

<div id="taglist">
    <br /><hr />
        Quisque ut felis urna, eget rutrum odio. Proin sed augue at 
            <li>
                    <span class="word">enim consectetur</span>
                    <div class="del">+</div>
                    <div class="save">-</div>
            </li>
        Ut interdum erat at neque egestas sagittis sed non massa. Nullam nec nulla quis purus convallis venenatis. Vivamus a pulvinar mauris. Quisque suscipit augue a felis suscipit ornare.
            <li>
                    <span class="word">euismod.</span>
                    <div class="del">+</div>
                    <div class="save">-</div>
            </li>
        Aliquam eget quam sit amet lacus commodo malesuada.            
            <li>
                    <span class="word">Etiam</span>
                    <div class="del">+</div>
                    <div class="save">-</div>
            </li>
        Ut interdum erat
            <li>
                    <span class="word">eget</span>
                    <div class="del">+</div>
                    <div class="save">-</div>
            </li>
     leo in turpis congue porta vel non nisl. Mauris ipsum erat, pellentesque at ullamcorper at, egestas ac enim. Aliquam fringilla mollis porttitor. In tempor pretium gravida.
    <hr /><br />
</div>
4

1 に答える 1

2

div問題は、ブラウザが 2 つのフローティングsに少量のスペースを割り当てていることだと思います。フローティングの代わりに絶対配置を使用することで、(少なくとも Firefox では) 問題を解決できました。

.del {
    display: none;
    background-color: red;
    width:50%;
    text-align:center;
    position: absolute;
    left: 0;
    top: 20px;
}
.save {
    display: none;
    background-color: green;
    width:50%;
    text-align:center;
    position: absolute;
    right: 0;
    top: 20px;
}
于 2012-04-17T21:00:36.753 に答える