How to align the span and the input?

Question

I want to align my spanand my inputso I followed How to properly align the span and input elements? but I think I made a mistake because my spanaren't aligned with my input and I need to gain some space.So if I can align them it'll take less space.

What did I made wrong here ?

.form-style-2{
    max-width: 600px;
    padding: 10px 10px 2px 10px;
    font: 13px Arial, Helvetica, sans-serif;
    background-color: blue;
}
.form-style-2-heading{
    font-weight: bold;
    font-style: italic;
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
    font-size: 15px;
    padding-bottom: 3px;
}
.form-style-2 label{
    display:block;
    font-size: 15px;
}

.form-style-2 label > span{
    font-weight: bold;
    padding-right: 5px;
}
.form-style-2 span.required{
    color:red;
}

.form-style-2 input.input-field, input.nameModif, input.env, input.vol, input.port, input.expose, input.dependsOn{
  position: relative;
  top: -1px;
  margin-left: 20%;
  width: 80%;
  margin-bottom: 5px;
}

.form-style-2 a.addEnv, a.addVol, a.addPort, a.addExpose, a.addDependsOn{
  margin-left: 30%;
}

.form-style-2 input.input-field{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 1px solid #C2C2C2;
    border-radius: 3px;
    padding: 7px;
    outline: none;
}
.form-style-2 .input-field:focus{
    border: 1px solid #0C0;
}
.form-style-2 input.saveModif{
    border: none;
    padding: 5px 5px 5px 5px;
    background: #FF8500;
    color: #fff;
    box-shadow: 1px 1px 4px #DADADA;
    border-radius: 3px;
}
.form-style-2 input.saveModif:hover{
    background: #EA7B00;
    color: #fff;
}

  <div class="form-style-2">
    <div class="form-style-2-heading">Oye oye</div>
    <form action="" method="post">
      <label for="field1">
        <span>Container name
          <span class="required">*</span>
        </span>
        <input type="text" class="input-field nameModif" name="field2" value="e1" />
      </label>
    <label for="field2">
      <span>Environment
      </span>
      <input type="text" class="input-field env" name="field2" value="e1" />
      <input type="text" class="input-field env" name="field2" value="e2" />
      <input type="text" class="input-field env" name="field2" value="e3" />
      <a class="addEnv" aria-expanded="false"><i class="fa fa-plus"></i></a>
    </label>
    <label for="field3">
      <span>Volumes
      </span>
      <input type="text" class="input-field vol" name="field2" value="v1" />
      <input type="text" class="input-field vol" name="field2" value="v2" />
      <input type="text" class="input-field vol" name="field2" value="v3" />
      <a class="addVol" aria-expanded="false"><i class="fa fa-plus"></i></a>
    </label>
    <label for="field4">
      <span>Ports
      </span>
      <input type="text" class="input-field port" name="field2" value="p1" />
      <input type="text" class="input-field port" name="field2" value="p2" />
      <a class="addPort" aria-expanded="false"><i class="fa fa-plus"></i></a>
    </label>
    <label for="field5">
      <span>Expose
      </span>
      <input type="text" class="input-field expose" name="field2" value="ex1" />
      <input type="text" class="input-field expose" name="field2" value="ex2" />
      <a class="addExpose" aria-expanded="false"><i class="fa fa-plus"></i></a>
    </label>
    <label for="field6">
      <span>Depends on
      </span>
      <input type="text" class="input-field dependsOn" name="field2" value="d1" />
      <input type="text" class="input-field dependsOn" name="field2" value="d2" />
      <a class="addDependsOn" aria-expanded="false"><i class="fa fa-plus"></i></a>
    </label>
    <label>
      <span>&nbsp;</span>
      <input class="saveModif" type="submit" value="Save" />
    </label>
    </form>
    </div>

[EDIT] It's not a dupe, for me it's not one since I cited the post in my post and I wasn't able to solve my problem with the answer of the cited post.

@GeorgeGarchagudashvili it's in the linked post, I don't know I just follow the answer because I need to align my `span` and my `input` — , May 24 '17 at 13:07
remove the `margin-left` from inputs and reduce the width by a small amount(say 75%) so the `span` + `padding/margin` + `input` element adds upto 100% `width`. — Nikhil Nanjappa, May 24 '17 at 13:09
TO the downvoter and the one who put the dup, I already posted the link in my post so it's useless. — , May 24 '17 at 13:13

Mukul Kant · Accepted Answer · 2017-05-24T13:21:05.880

You need to make some changes, Add width in input-box and span and remove margin-left.

  .form-style-2{
    max-width: 600px;
    padding: 10px 10px 2px 10px;
    font: 13px Arial, Helvetica, sans-serif;
    background-color: blue;
}
.form-style-2-heading{
    font-weight: bold;
    font-style: italic;
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
    font-size: 15px;
    padding-bottom: 3px;
}
.form-style-2 label{
    display:table;
    width: 100%;
    font-size: 15px;
}

.form-style-2 label > span{
    font-weight: bold;
    padding-right: 5px;
    width:25%;
    /*display:inline-block;*/
    display: table-cell;
}
.form-style-2 span.required{
    color:red;
}

.form-style-2 input.input-field, input.nameModif, input.env, input.vol, input.port, input.expose, input.dependsOn{
  position: relative;
  top: -1px;
/*  margin-left: 20%;*/
  width: 80%;
  margin-bottom: 5px;
}

.form-style-2 a.addEnv, a.addVol, a.addPort, a.addExpose, a.addDependsOn{
 /* margin-left: 30%;*/
}
.form-style-2 input.input-field {
    border: 1px solid #c2c2c2;
    border-radius: 3px;
    box-sizing: border-box;
    display: table-cell;
    margin: 4px;
    outline: medium none;
    padding: 7px;
    width: 31%;
}
.form-style-2 .input-field:focus{
    border: 1px solid #0C0;
}
.form-style-2 input.saveModif{
    border: none;
    padding: 5px 5px 5px 5px;
    background: #FF8500;
    color: #fff;
    box-shadow: 1px 1px 4px #DADADA;
    border-radius: 3px;
}
.form-style-2 input.saveModif:hover{
    background: #EA7B00;
    color: #fff;
}

<div class="form-style-2">
    <div class="form-style-2-heading">Oye oye</div>
    <form action="" method="post">
      <label for="field1">
        <span>Container name
          <span class="required">*</span>
        </span>
        <input type="text" class="input-field nameModif" name="field2" value="e1" />
      </label>
    <label for="field2">
      <span>Environment
      </span>
      <input type="text" class="input-field env" name="field2" value="e1" />
      <input type="text" class="input-field env" name="field2" value="e2" />
      <input type="text" class="input-field env" name="field2" value="e3" />
      <input type="text" class="input-field env" name="field2" value="e3" /><input type="text" class="input-field env" name="field2" value="e3" /><input type="text" class="input-field env" name="field2" value="e3" />
      <a class="addEnv" aria-expanded="false"><i class="fa fa-plus"></i></a>
    </label>
    <label for="field3">
      <span>Volumes
      </span>
      <input type="text" class="input-field vol" name="field2" value="v1" />
      <input type="text" class="input-field vol" name="field2" value="v2" />
      <input type="text" class="input-field vol" name="field2" value="v3" />
      <a class="addVol" aria-expanded="false"><i class="fa fa-plus"></i></a>
    </label>
    <label for="field4">
      <span>Ports
      </span>
      <input type="text" class="input-field port" name="field2" value="p1" />
      <input type="text" class="input-field port" name="field2" value="p2" />
      <a class="addPort" aria-expanded="false"><i class="fa fa-plus"></i></a>
    </label>
    <label for="field5">
      <span>Expose
      </span>
      <input type="text" class="input-field expose" name="field2" value="ex1" />
      <input type="text" class="input-field expose" name="field2" value="ex2" />
      <a class="addExpose" aria-expanded="false"><i class="fa fa-plus"></i></a>
    </label>
    <label for="field6">
      <span>Depends on
      </span>
      <input type="text" class="input-field dependsOn" name="field2" value="d1" />
      <input type="text" class="input-field dependsOn" name="field2" value="d2" />
      <a class="addDependsOn" aria-expanded="false"><i class="fa fa-plus"></i></a>
    </label>
    <label>
      <span>&nbsp;</span>
      <input class="saveModif" type="submit" value="Save" />
    </label>
    </form>
    </div>

Oh, I see something great here because the main goal is to add the `input` dynamically with JavaScript (so the number of `input` is unknown) and with your idea to display 3 on one line it's great, you know if I could do something like a table of input ? So I'd just have to add cell in the table and it would do a table 3x unknown — , May 24 '17 at 13:12
It looks very nice ! So like this it will always be `3xunknown` right ? And why the `input width`is `31%` ? it's to cut in 3 ? (I tested to add some input but I want to be sure). One other question, how could I place the `` always under the line (we can see in the example where there is only 2 `input` the `+` is next to the last one) Thank you so much for the answer ! — , May 24 '17 at 13:24
For the `+` I just added `display:block` so it's ok. Thank you for the nice answer — , May 24 '17 at 13:34

How to align the span and the input?

1 Answers1