2012-04-17 59 views
0

我製作了一個小部件:在一個非常棒的單詞上彈出一個小部件,彈出一個菜單。拖到您的選擇,釋放。菜單打開。css&jQuery:點擊/拖拽改變尺寸的元素

窗口小部件功能正常,但點擊/拖動會使窗口元素更改大小並移動,這不是所需的行爲。 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> 

回答

2

我認爲問題是,瀏覽器對兩個浮動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; 
} 
+0

呃。 。 。每次都有我的位置。 gj和謝謝。 – monsto 2012-04-19 04:42:33