Can anyone please help on above issue.
The Structure is,
<div class="outer">
<div class="label">
<label>
</div>
<div class="input">
<input>
</div>
</div>
Make .outer as display:flex and aling-items: center
Give .label a width of 30% and .input a width of 70%, therefore they align as you expect, make sure your input text fields have 100% width
i tried this out . But it did not worked.
Based on your structure, you have to convert the label
into a block element by giving display:block
Now give the
label
awidth
of30%
Give the
.right
class awidth
of70%
and make the<input>
to100% width
Now
.left
should be givendisplay:flex;
Note: You have used id’s repeatedly, id should be used once or else it may break the code
can you please provide its pen link.I mean for screen shot you shared.
I have explained the code inside comments.
You are welcome.! Happy coding.!
@Sujith3021 facing issue ,my text is not aligned with checkbox .
And also in textarea placeholder text is not aligned at the top of textbox.
code pen link
Its because you have a label around checkbox and earlier you had applied text-align:right to labels, so it gets conflicted here too
what should be alignment in this case?
If i remove that it is breaking radio button and checkbox alignment?
Have a common class for all the labels except for checkbox label and radio label, for labels of check and radio you can define another class and move it accordingly, and also you have used ul there, make sure to remove the padding and margin of ul which has for default
You mean to say something like this
ul {
margin : 0px;
padding : 0px;
}
Yep and you can add the margins and padding based on your need
And also , text area placeholder is not aligned properly .
You can refer my pen which i posted before for the update, and have a look at
https://www.w3schools.com/html/html_form_elements.asp
And this
Thank you again. will look into it