CODEWITHSUNDEEP
htmlcss
dillpickles
dillpickles

Reputation: 1

how to get label and text to appear on the same line

My label is on one line and text is on the next line. How could I modify the css to make them both on the same line? I have tried several things such as float based on other posts but they still are on different lines. 

.indentColumn {
  width: 71px;
  padding-top: 5%;
}

.labelColumn {
  width: 71px;
  margin-left: 15%;
}

.inputForm {
  margin-left: 30%;
}
<div class="indentColumn">
  <div class="labelColumn">
    <div class="inputForm">
      <span class="secNav">
        <label display:inline-block; for="username">#springMessageText("idp.login.username", "User ID:")
        </label>
        <input class="fieldColumn" display: inline-block; id="username" name="j_username" type="text" size="20" maxlength="64" minlength="6"
                	value="#if($username)$encoder.encodeForHTML($username)#end">
      </span>
    </div>
  </div>
</div>

Thanks for the help everyone.I removed all the divs, display and also the class in the textbox and now they are on the same line. The main issue seemed to be the class in the textbox because only after I removed that did they appear on the same line.

I also found that there was a form div that was set to 250px that was causing the text field to go onto the next line whenever there was a left-margin. Once I removed that, things started working better.

Upvotes: 0

Views: 1484

Answers (2)

user4602228
user4602228

Reputation:

CSS

label{
   display:inline-block;
}

and remove <label display:inline-block; ... /> - its wrong

Upvotes: 0

Quentin
Quentin

Reputation: 943556

If you want them on the same line, then put them in a container that is wider than 71 pixels.

There isn't room in 71 pixels for them to fit side by side.

Upvotes: 3

Related Questions