Инпуты внутри списка

[PavelTkachev]

Сделал вёрстку с четырьмя инпутами внутри списка с моноширинным шрифтом.

http://jsfiddle.net/bmv123yd/

 

Почему длинна четвёртого инпута меньше, чем сумма первых трёх включая отступ? Я использовал для всего единицы ch и моноширинный шрифт.

 

Почему не отображается символ, написанные через :after?

[Great Rash]

Почему не отображается символ, написанные через :after?

А почему он должен отображаться?

 

Почему длинна четвёртого инпута меньше, чем сумма первых трёх включая отступ?

Да вроде равна трем верхним.

[PavelTkachev]

А почему он должен отображаться?

 

Потому что я так хочу.    А как сделать, чтобы отображался?

 

Да вроде равна трем верхним.

 

20ch+0.5ch+7ch+0.5ch+6ch=34ch. Поэтому я ожидал, что нижняя черта будет равно трём верхним+отступы между ними. А она короче.

[Great Rash]

Потому что я так хочу.    А как сделать, чтобы отображался?

Никак. Внутрь инпута нельзя поместить ещё один элемент. Только если плейсхолдер делать. Но не понятно нужен он вам или нет, т.к. вы ничего не рассказываете о вашей задаче.

 

20ch+0.5ch+7ch+0.5ch+6ch=34ch. Поэтому я ожидал, что нижняя черта будет равно трём верхним+отступы между ними. А она короче.

Какая ещё черта? Никакой черты не видно в вашем примере. Инпуту вы и так задали ширину 34ch в чём проблема тогда?

[PavelTkachev]

Никак. Внутрь инпута нельзя поместить ещё один элемент. Только если плейсхолдер делать. Но не понятно нужен он вам или нет, т.к. вы ничего не рассказываете о вашей задаче.

 

Это переворот в моём понимании :after. Я ранее считал, что он вставляет контент после блока, а не внутри справа. Я исходил их названия, что after - это после, но никак не innerright. Я хотел букву «д» пририсовывать справа от инпута через css.

 

 

 

Какая ещё черта? Никакой черты не видно в вашем примере. Инпуту вы и так задали ширину 34ch в чём проблема тогда?

 

Если присмотреться, то у последнего инпута есть border-bottom. И мне надо, чтобы его длинна была равна элементам сверху с учётом отступа.

Edited December 26, 2014 by PavelTkachev

[Great Rash]

Это переворот в моём понимании :after.

Сразу видно, что вы не читали про этот элемент ничего, или читали невнимательно. 

 

Если присмотреться, то у последнего инпута есть border-bottom.

Где?

[PavelTkachev]

Сразу видно, что вы не читали про этот элемент ничего, или читали невнимательно.

 

Мне и сейчас не помогло. Тут нигде не написано, что для инпутов не работает. Получается, что я могу только справа приписать букву прямо в html?

 

 

 

Где?

 

В FireFox 34.0. В Chrome всё именно так, как Вы показали.

Я поэксперементировал и вот что обраружил. В FF43 если сделать два инпута одинаковой ширины в ch друг под другом, то их длины зрительно совпадают. А если сверху два интпута, а под ними инпут суммарной длинны, то он получается короче. Хотя если использовать FireBug, то ширина окажется равной, а зрительно это не так...

Edited December 26, 2014 by PavelTkachev

[Николя223]

:after - после контента
Если вам инпуты не принципиальны - можно так 

http://jsfiddle.net/bmv123yd/2/

[PavelTkachev]

Мне принципиально, чтобы добавляемая буква не была подчёркнута. Тогда как поле для ввода было подчёркнуто. И я думал этого добиться одним :after. А получается, что надо вводить новые теги внутри html.

[Great Rash]

Плейсхолдер не катит?

[PavelTkachev]

Нет. Он же пропадёт после начала ввода текста. Спасибо всем за помощь, буду добавлять тег.