Alignment of text inputs in HTML/CSS

Asked

Viewed 40,368 times

2

How do I align these two input?

I’ve been trying for over two days and I can’t get them to line up properly.

As inputs

html css

  • Nickolas, line up on what? Could you put here the code you’ve already made, even if it’s wrong we can fix it.

2 answers

3


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

This way, all labels will have the same size, forcing the alignment of 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 is interesting to update your question with what you have already done, so it is easier to supplement your code.

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

Label Placement on Forms

3

It all depends on your Markup but using only CSS, without introducing new elements in the Markup beyond the required, we have managed to resolve the issue:

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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.