Почему блок не реагирует на размер инпута?

Question

[Demigodd]

Ссылка на JSFiddle

Размер input-a задан 50%, но input-content блок берет место под 100%.
Почему так просиходит и как сделать так что бы размер input-content блока совподал с input-ом ?

Сейчас так:


Вроде должно быть так:

Comments

[Александр]

А почему внешний блок должен подстраиваться под размер дочернего элемента?

[Demigodd]

Александр,
А почему нет ?
Вроде ему же не задано ни какое width значение.

Так если убрать input, блок станет просто точкой.
Я так понял с инпутом внутри у него должен быть уже размер инпута.

[Александр]

DEATH2298, если ему не задано width, то он просто блок - ширина 100% от ЕГО родительского блока.
а если блок пустой - то он и не показывается, точкой становится потому, что у него есть border.

Вам в ответах уже правильно написали. Ему ставите нужную ширину, а непосредственно инпуту - 100%.
Это простейшие основы, поизучайте

[Demigodd]

Александр,
Решение с инпут = 100% и манипуляция размера блока подходит и вроде логично.

Но вот почему при инпут = 50% выходят отступы с лева и справо, всеранво не понятно.
Так если он берет

ширина 100% от ЕГО родительского блока.

, то должно получиться:

[Александр]

DEATH2298, это не отступы, это пустое пространство. Вы же сами говорите ему - ".input, используй 50% от .input-content", вот он и встает на 50% от него.

От какого блока .input должен рассчитывать 50%, как не от .input-content? С какой стати он должен перескакивать этот блок и высчитывать 50% от "прародительского"?

А у .input-content ширина не указана, поэтому он по умолчанию занимает 100%.

Answer 1

[Ankhena]

Смотрите, вы пишете:
я хочу, чтобы внутренний элемент занимал половину ширины блока, но сам блок по ширине равнялся внутреннему.

Это бред.

Нужно определиться кто от кого должен брать размеры.
Инпут от родителя или родитель от инпута.

Если вы зададите размер инпуту в px, то родитель будет ровно как инпут (при ваших остальных стилях).
Либо наоборот, разберитесь с шириной родителя, а инпуту задавайте 100%.
Тогда они будут равны.

Answer 2

[drawnofmymind]

https://jsfiddle.net/6st8fq7e/ ?
Блок это родитель, у него может быть любая ширина,но чтобы растянуть input на всю,тебе нужно задать 100%

Answer 3

[Lord_Dantes]

Чтобы задать отступ внутри input-а можно использовать padding-и

Answer 4

[Евгений]

По моему проще всего:
.input-content { display: inline-block;}