html - 如何在文本框下放置 SVG 元素？

Question

我正在尝试做两件事:

1. 让文本输入占用 div 中的所有空间。我目前的做法是 left: 0; right: 0; 但显然它不起作用。
2. 将 SVG 放在与容器 div 相对的位置，以便我可以将它移动到文本 inpit 下方(我正在处理 SVG 中的 slider 组件)。

你可以在this JsFiddle中看到它

定位有什么线索吗？ clear: both 将 SVG 发送到下一行是没有用的吗？我可以通过某种方式从容器 div 元素实现相对定位吗？

更新:

我找到了解决定位问题 (2) 的方法。在容器 div 上使用 position: relative 并在两个子元素(input 和 a 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;

            }