Alignment of text input in HTML / CSS

Navigation
2

How do I align these two input ?

I've been trying for more than 2 days and I can not get them to line up properly.

    
asked by anonymous 11.04.2015 / 05:41

2 answers

3

For this case there are some solutions. What I can advise you to do is to put the label and input into different divs and control their size through these divs.

In this way, all labels will have the same size, forcing the alignment of the inputs. In this case it will be important to align the labels to the right. 

body {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
}

#container {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    width: 360px;
    height: 120px;
    margin: auto;
    box-shadow: 0px 0px 10px black;
    padding: 20px;
    box-sizing: border-box;
}

.row {
  clear: both;
}

.column-3 {    
    width: 25%;    
}

.column-9 {    
    width: 75%;    
}

.label {
    padding-top: 7px;
    text-align: right;    
}

.label:after {
    content: ':';
    padding-right: 5px;
}

.column {
    float: left;
    height: 41px;    
}

.input input {
    width: 100%;
    height: 34px;    
    padding-left: 5px;
    box-sizing: border-box;
}
<div id="container">
    <div class="row">
        <div class="column-3 column label">
            <label for="txtLogon">Logon</label>
        </div>
        <div class="column-9 column input">
            <input type="text" id="txtLogon" />
        </div>
    </div>
    <div class="row">
        <div class="column-3 column label">
            <label for="txtPassword">Senha</label>
        </div>
        <div class="column-9 column input">
            <input type="password" id="txtPassword" />
        </div>
    </div>
</div>

In any case, it's interesting that you update your question with what you've already done, so it's easier to complement your code.

Finally, I recommend reading the following article (in the example above I used the right alignment):

Label Placement on Forms

    
11.04.2015 / 13:41
2

It all depends on your current markup , but resorting to CSS only, without introducing new elements in markup > 

form,
label {
  display: block;
  padding: 10px;
}
form {
  width: 270px;
  margin: 10px;
  background-color: rgba(0, 0, 0, 0.5);
}
label {
  color: #FFF;
  text-align: right;
}
input {
  display: inline-block;
  padding-left: 10px;
}
<form>
  <label for="username">
    Login:
    <input type="text" value="" id="username" name="username" />
  </label>
  <label for="username">
    Senha:
    <input type="text" value="" id="username" name="username" />
  </label>
</form>
    
11.04.2015 / 14:43
Dynamic Form Pass parameters to the Controller via @Html.Action