如何定位一個文本框下一個SVG元素？

我正在嘗試做兩件事：如何定位一個文本框下一個SVG元素？

使文本輸入獲取div中的所有空間。我目前的做法是left: 0; right: 0;，但顯然它不起作用。
把一個SVG中的相對位置的conainer div在我剛下的文字INPIT（我工作的一個滑塊組件中的SVG）移動它的方式。

你可以看到它在this JsFiddle

的定位任何線索？ clear: both將SVG發送到下一行是沒有用的？我能實現從某種程度上容器div元素的相對定位？

UPDATE：

我已經找到了解決辦法爲我的定位問題（2）。爲了在兩個子元素（一個input和svg）容器div和position: absolute上使用position: relative。請參閱updated JsFiddle。

然而，問題（1）保持。如何使文本輸入充滿整個容器div？

來源

2014-02-19 hanbzu

還有一個問題解決了這個問題的一部分：http://stackoverflow.com/questions/2027657/overlapping-elements-in-css – hanbzu

試試這個把SVG下一行：

  .container { 
       width: 400px; 
       height: 45px; 
       background: gray; 
      } 

      .textfield { 
       clear: both; 
       float:left; 
       margin-right:100px; 
      } 

      .slider { 
       width: 200px; 
       height: 15px; 
       border: 1px solid #741; 

      }

來源

2014-02-19 09:24:04 BlueBay

我看到你的想法是爲文本框添加margin-right，但是我不能在我的更一般的設計上可以做到這一點。我發現我的問題的第1部分的解決方法，使用絕對定位從容器div。 – hanbzu

重新一部分＃1。你爲什麼不把你的輸入文本字段設置爲與div相同的大小？

.textfield { 
    width: 400px; 
    height: 45px; 
    clear: both; 
}

http://jsfiddle.net/M8UEv/8/

它還具有文本字段下移動SVG的效果。

來源

2014-02-19 11:50:59

因爲div的大小是動態生成的 – hanbzu

如何定位一個文本框下一個SVG元素？

回答

相關問題