Question

我制作了一个小部件：mousedown on a hilited words，一个菜单弹出。拖到你的选择，释放。菜单unops。

窗口小部件正常运行，但单击/拖动会使窗口小部件元素更改大小并移动，这不是所需的行为。 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>

Answer 1

我认为问题在于浏览器为两个浮动div分配了少量空间。我能够通过使用绝对定位而不是浮动来解决问题（至少在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;
}

css＆amp; jQuery：元素在点击/拖动时改变大小

1 个答案: