0

我做了一个小部件：鼠标按下一个hilited单词，弹出一个菜单。拖动到您的选择，释放。菜单弹出。

小部件功能正常，但单击/拖动会使小部件元素改变大小并四处移动，这不是所需的行为。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我认为问题在于浏览器为两个浮动的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 回答