Как без JS и таблиц сделать несколько input с label над ними?
Как при помощи блочных элементов прилепить лейблы к input полям?
Как на примере, но ровнее 🙂 
Если использовать <br /> и свойство float и закрепить поля внутри <label> , то следующий блок начинается на уровне <input> , а хотелось бы на уровне лейбла.
Styling Form with Label above Inputs
What would be the best way to do this? I keep getting in a muddle my floats!
9 Answers 9
I’d make both the input and label elements display: block , and then split the name label & input, and the email label & input into div’s and float them next to each other.
Probably a bit late but this worked for me. i simply used column flex-direction on the label and input elements HTML
You could try something like
and then css it like
I know this is an old one with an accepted answer, and that answer works great.. IF you are not styling the background and floating the final inputs left. If you are, then the form background will not include the floated input fields.
To avoid this make the divs with the smaller input fields inline-block rather than float left.
I’d prefer not to use an HTML5 only element such as <section> . Also grouping the input fields might painful if you try to generate the form with code. It’s always better to produce similar markup for each one and only change the class names. Therefore I would recommend a solution that looks like this :
Using flex-direction: column; on the label elements will place the labels above their boxes, however it will also lock all the boxes in a long column. To get more than one box per line, with the label above the boxes you must pair them with divs. Here is an example of both:
Label над input
выровнять input c label
привет подскажите пожалуйста, как выровнять input по label’y. <html> <head> .
Label поместить в поле input
Господа! Нет возможности поместить placeholder поэтому нужно классом вогнать label в поле.
Расположить label и input в одну строку
Здравствуйте, подскажите как сделать чтоб мои label и input распологались не друг под другом а в.
Сообщение было отмечено mrtoxas как решение
Решение
mrtoxas, спасибо за информацию, я не знал (=
вот комбинация с кодом выше (mrtoxas)
Highlight label для активного input в bootstrap3
Не уверен, что в ту ветку, но вроде как bootstrap — это CSS фреймворк)) В общем обычный кусок.
Привязать input type="radio" к label
input type="radio" находятся поразень от label’ов, как это показанно на картинке. Не знаю как это.
Начинает писать в input-e с центра самого input
Привет. как сделать так чтобы писать начинало не с середины самого инпута, а с самого начала? Ещё.
елемент1 над елементом2 который над елементом3 но под элементом1
такое вообще по моему нереально? с помощью z-index или как красный квадрат <aside.
Floating Label over input
This <span> shall be raised when the <input> is :focus or when it holds a value, sadly there is no pseudo-class for that.
Possible hacks involves :
- adding a [required] so the input is :invalid state when empty => bad : it prevent any form submit
- adding a [placeholder] so the input has a :placeholder-shown state => require an empty placeholder
the default state must be usable.
In case of bad CSS support, we don’t want our input to be covered by the span, so we revert the logic in order to pull-down the span in the following case :
The span shall cover the input if the input has an blank placeholder and is neither focus nor filled.