Html Question posted in
Some basic documentation can be found here.

Html – How to display all input fields one by one and only 4 input fields in one row using the below structure?

`

<div>
    <div><input /></div>
    <div>
        <div><input /></div>
        <div><input /></div> 
        <div><input /></div>
        <div><input /></div>
        <div><input /></div>
    </div>
    <div><input /></div>
    <div><input /></div>
    <div><input /></div>
</div>

`

I need to display all input fields one by one and only 4 input fields in one row using the below structure.

Tags:

2

Answers


  1. 0

    I don’t know what you mean one by one, but from what I did understand you could use a display: flex in the "inputs line".

    So in your html you would have to add a class to the div that you want to become the line, like that:

    <div>
    <div><input /></div>
    <div class="foo">
        <div><input /></div>
        <div><input /></div> 
        <div><input /></div>
        <div><input /></div>
        <div><input /></div>
    </div>
    <div><input /></div>
    <div><input /></div>
    <div><input /></div>
</div>

    And then in your css:

    .foo{
    display: flex;
}
    Login or Signup to reply.
  2. 0

    you can use the flex display with a 25% width

    .input-container {
    display: flex;
    flex-wrap: wrap;
}

.input-container > div {
    flex: 1 0 25%; /* width of 25% */
    max-width: 25%; /* 25% width */
}

input {
    width: 100%; 
    box-sizing: border-box; 
}
    <div class="input-container">
    <div><input /></div>
    <div><input /></div> 
    <div><input /></div>
    <div><input /></div>
    <div><input /></div>
    <div><input /></div>
    <div><input /></div>
    <div><input /></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search