Question

我正在尝试做两件事：

使文本输入占用div中的所有空格。我目前的方法是left: 0; right: 0;，但显然它不起作用。
将SVG置于与变容器div相对的位置，以便我可以在文本inpit下移动它（我正在处理SVG中的滑块组件）。

您可以在this JsFiddle

定位的任何线索？将clear: both发送到下一行是没有用的？我能以某种方式从容器div元素中获得相对定位吗？

更新：

我找到了解决我的定位问题的方法（2）。在容器position: relative和div上对两个子元素（position: absolute和input）使用svg。请参阅updated JsFiddle。

然而，问题（1）仍然存在。如何使文本输入填充整个容器div？

Answer 1

尝试将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;

            }

Answer 2

重新开始＃1。为什么不将输入文本字段设置为与div相同的大小？

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

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

它还具有在文本字段下移动SVG的效果。

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

2 个答案: