Shishir Kumar Singh Shishir Kumar Singh - 3 months ago 9
CSS Question

How to align the labels and form-field

I want to align the labels and as well as text-fields in this way:enter image description here

But the output I get from my code is this:enter image description here

And my code is:



<span class="questions">Your Date of birth: </span>
<input type="date" placeholder="DOB"/><br>
<span class="questions">Which Country You Are In:</span>
<select>
<option selected disabled>Select Country</option>
<option>India</option>
</select><br>
<span class="questions">In which University You Are In:</span>
<select>
<option selected disabled>Select University</option>
<option>AKTU</option>
</select><br>
<span class="questions">In which College You Are In:</span>
<select>
<option selected disabled>Select Your College</option>
<option>Raj kumar Goel Institute of Technology, Ghaziabad (RKGIT)</option>
</select><br>
<span class="questions">Your Mobile Number: </span>
<input type="tel" placeholder="Mobile Number"/><br>
<button class="btn">Proceed to Feeds.</button>





What should I add to CSS so that I get the required output or can I add
&nbsp;
before the
<span>
tag to adjust as the output required. Can anyone help me in this.

Answer

Try this:

.questions{
width:50%;
  text-align:right;
  display:inline-block;
}
input{width:150px;}
select{width:150px;}
<span class="questions">Your Date of birth: </span>
	<input type="date" placeholder="DOB"/><br>
<span class="questions">Which Country You Are In:</span>
	<select> 
		<option selected disabled>Select Country</option>
		<option>India</option>
	</select><br>
<span class="questions">In which University You Are In:</span>
	<select> 
		<option selected disabled>Select University</option>
		<option>AKTU</option>
	</select><br>
<span class="questions">In which College You Are In:</span>
	<select> 
		<option selected disabled>Select Your College</option>
		<option>Raj kumar Goel Institute of Technology, Ghaziabad (RKGIT)</option>
	</select><br>
<span class="questions">Your Mobile Number: </span>
	<input type="tel" placeholder="Mobile Number"/><br>
<div align="center"> <button class="btn">Proceed to Feeds.</button><div>

Comments