Как разместить элемент SVG под текстовым полем?

Question

Как разместить элемент SVG под текстовым полем?

0

Я пытаюсь сделать две вещи:

Сделайте ввод текста, возьмите все пространство в div. Мой текущий подход left: 0; right: 0; left: 0; right: 0; но, видимо, он не работает.
Поместите SVG в относительное положение к div контейнеру таким образом, чтобы я мог перемещать его прямо под текстом inpit (я работаю над компонентом слайдера в SVG).

Вы можете увидеть это в этом JsFiddle

Любые подсказки для позиционирования? clear: both бесполезны для отправки SVG на следующую строку? Могу ли я каким-то образом достичь относительного позиционирования из элемента div контейнера?

ОБНОВИТЬ:

Я нашел обходной путь для моего вопроса о позиционировании (2). Использовать position: relative на div контейнера и position: absolute на обоих дочерних элементах (input и svg). См. Обновленный JsFiddle.

Тем не менее остается вопрос (1). Как сделать ввод текста заполнить весь контейнер div?

hanbzu 19 фев. 2014, в 10:59

Источник

0

Есть еще один вопрос, касающийся этой части: stackoverflow.com/questions/2027657/overlapping-elements-in-css
hanbzu 19 фев. 2014, в 10:39

Теги:

html

css

svg

2 ответа

Ещё вопросы

Есть еще один вопрос, касающийся этой части: stackoverflow.com/questions/2027657/overlapping-elements-in-css

Paul LeBeau · Answer 1 · 2014-02-19T10-48-00.000Z

Повторите часть №1. Почему бы вам просто не задать поле ввода для ввода того же размера, что и div?

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

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

Он также влияет на перемещение SVG в текстовое поле.

Поскольку размер div генерируется динамически

BlueBay · Answer 2 · 2014-02-19T08-06-00.000Z

Попробуйте установить 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;

            }

Я вижу, что ваша идея состоит в том, чтобы добавить margin-right в текстовое поле, но я не могу позволить себе сделать это в моем более общем дизайне. Я нашел обходной путь для первой части моего вопроса, используя абсолютное позиционирование из контейнера div.