Increase the overall width of the form boxes to span the entire line at 100% full width

Question

Increase the overall width of the form boxes to span the entire line at 100% full width

I'm currently working on a form that includes multiple input boxes placed in the same row.

My goal is to set up the email input to occupy one line, while the date, time, and number inputs should be on another line. However, I am facing difficulty in making sure that the date/time/number inputs span exactly 100% of the width of the form.

The percentages specified in the CSS file at the moment are just approximate values, causing the number box's edge not to align vertically with the email input box.

input[type=email] {
  width: 100%;
}
input[type=date] {
  width: 22%;
  margin-right: 15px;
}
input[type=time] {
  margin-right: 15px;
}
input[type=number] {
  width: 11.4%
}

<form>
  Email: <input type="email"><br>
  Date: <input type="date">
  Time: <input type="time">
  Number in Party: <input type="number">
</form>

html css

Answer 1

Answer №1

If you want to achieve this layout using flexbox, take a look at this example

The approach I used was wrapping each line in a div, like so:

<form>
  <div>Email: <input type="email"></div>
  <div>
    <div>Date: <input type="date"></div>
    <div>Time: <input type="time"></div>
    <div>Number in Party: <input type="number"></div>
  </div>
</form>

For the CSS styling, here's what I did:

form{
  display: flex;
  flex-direction: column;
}

form>div{
  display: flex;
}

form>div input{
  flex-grow: 1;
}

form>div>div{
  display: flex;
  flex-grow: 1;
}

Answer 2

If you want to achieve this layout using flexbox, take a look at this example

The approach I used was wrapping each line in a div, like so:

<form>
  <div>Email: <input type="email"></div>
  <div>
    <div>Date: <input type="date"></div>
    <div>Time: <input type="time"></div>
    <div>Number in Party: <input type="number"></div>
  </div>
</form>

For the CSS styling, here's what I did:

form{
  display: flex;
  flex-direction: column;
}

form>div{
  display: flex;
}

form>div input{
  flex-grow: 1;
}

form>div>div{
  display: flex;
  flex-grow: 1;
}

Answer 3

Answer №2

You have the ability to customize the <label> element to control the width, padding, and margin of form field labels.

For instance:

label, input {
display: inline-block;
height: 24px;
line-height: 24px;
}

label {
width: 18%;
margin: 6px 0;
padding: 3px 0 3px 3px;
background-color: rgb(227,227,227);
}

input {
width: 80%;
}

input:nth-of-type(n+2) {
width: 13%;
}

<form>
<label for="email">Email:</label><input type="email" name="email" id="email"><br />
<label for="date">Date:</label><input type="date" name="date" id="date">
<label for="time">Time:</label><input type="time" name="time" id="time">
<label for="number">Number in Party:</label><input type="number" name="number" id="number">
</form>

Answer 4

You have the ability to customize the <label> element to control the width, padding, and margin of form field labels.

For instance:

label, input {
display: inline-block;
height: 24px;
line-height: 24px;
}

label {
width: 18%;
margin: 6px 0;
padding: 3px 0 3px 3px;
background-color: rgb(227,227,227);
}

input {
width: 80%;
}

input:nth-of-type(n+2) {
width: 13%;
}

<form>
<label for="email">Email:</label><input type="email" name="email" id="email"><br />
<label for="date">Date:</label><input type="date" name="date" id="date">
<label for="time">Time:</label><input type="time" name="time" id="time">
<label for="number">Number in Party:</label><input type="number" name="number" id="number">
</form>

Answer 5

Answer №3

input[type=email] {
  width: 100%;
}
input[type=date] {
  width: 21%;
  
}
input[type=time] {
  width: 21%;
   margin-right:42px;
}
input[type=number] {
 
  width: 20.9%;
    
  
}

<form>
  Email: <input type="email"><br><br>
  Date : <input type="date">
  Time : <input type="time">
  Number in Party : <input type="number">
</form>

Answer 6

input[type=email] {
  width: 100%;
}
input[type=date] {
  width: 21%;
  
}
input[type=time] {
  width: 21%;
   margin-right:42px;
}
input[type=number] {
 
  width: 20.9%;
    
  
}

<form>
  Email: <input type="email"><br><br>
  Date : <input type="date">
  Time : <input type="time">
  Number in Party : <input type="number">
</form>

Increase the overall width of the form boxes to span the entire line at 100% full width

Answer №1

Answer №2

Answer №3

Similar questions

I am encountering unexpected issues with the functionality of img srcset and sizes

Receiving a 502 Bad Gateway error when attempting to request a CSS file via HTTPS

Challenges Arising from the Reflection of Vectors in Particle Collisions

Jquery animate not working properly after closing the div for the first time

Creating a showcase page that generates its own code: A guide

Is that possible to prevent the use of the & symbol in Angular 4 HTTP requests?

Please explain the display property used in Bootstrap input groups

Capture and reroute the loading of stylesheets, images, and fonts coming from Gecko

Using React.js to create table cells with varying background colors

determine the selection based on its numerical index

Minimize or conceal iframe

Comparing the Absolute anchor tag to the anchor tag with an absolute span

Searching for columns should be at the top of an angular datatable, not at the bottom

Is it possible to incorporate a <div> element within a PHP code?

"Ensure div remains at the bottom of the page even while

Trouble with jQuery addClass function when trying to add to a specific object variable

JavaScript exit page trigger

What is the reason for needing to multiply all the numbers by ten in order to solve this floating point addition problem?

What method can be employed to eliminate choice selection lacking any value?

VueJS encountered an issue while displaying the image