CODEWITHSUNDEEP
htmlcss
Rahul
Rahul

Reputation: 759

How to align label and text box in line through html?

With the below code, the summary and it's text box are aligned inline.But the text box for description is appearing below the label 'description'. How can I make it align inline? Please help me in resolving this.

    .left {
      width: 30%;
      float: left;
      text-align: right;
    }
    .right {
      width: 65%;
      margin-left: 10px;
      float: left;
    }
<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-5 col-sm-push-3 col-xs-4 col-xs-push-2">
        <h1 class="text-center" style="font-family:Colonna MT;font-size:50px;color:ForestGreen ;">Post Your Ad</h1>
        <form action="post" class="login-form">
          <div>
            <label class="left">Summary:</label>
            <input class="right" type="text" name="Summary" size="50">
          </div>
          <div>
            <label class="left">Description:</label>
            <input class="right" type="text" name="Description" style="height:100px;width:400px">
          </div>
        </form>
      </div>
    </div>
  </div>

Upvotes: 0

Views: 3595

Answers (8)

Gyan
Gyan

Reputation: 508

Remove the style attribute from the description input type, it will then appear as the summary input box.

<form action="post" class="login-form">
  <div>
    <label class="left">Summary:</label>
    <input class="right" type="text" name="Summary" size="50" style="width:400px">
  </div>
<div>
   <label class="left">Description:</label>       
   <input class="right" type="text" name="Description">

Upvotes: 0

G.L.P
G.L.P

Reputation: 7217

Try like this: Demo

If you need multi line text box, use textarea instead of input type text

    <div class="form-group row">
    <label for="inputEmail3" class="col-md-6 col-sm-12 form-control-label text-right">Summary</label>
      <div class="col-md-6 col-sm-12">
        <input type="text" class="form-control" name="Summary" size="50">
      </div>
    </div>

    <div class="form-group row">
      <label for="inputEmail3" class="col-md-6 col-sm-12 form-control-label text-right">Description</label>
      <div class="col-md-6 col-sm-12">
        <textarea class="form-control" name="Description"></textarea>
      </div>
    </div>

Edit:

As you mentioned, its not form-control class, its form-control-label.. You can get more info here

Updated Demo: To change the height, try chnaging the value of rows="8" for <textarea>

Upvotes: 1

jazZRo
jazZRo

Reputation: 1608

If you have trouble getting it in place you can also force a table layout without using tables:

.login-form {
    display: table;
}
.login-form>div {
    display: table-row;
}

.cell {
    display:table-cell;
    vertical-align: top;
}
...

Adding a div around the inputs and a "cell" class (and shouldn't it be a textarea?):

...
<form action="post" class="login-form">
    <div>
        <label class="left cell">Summary:</label>
        <div class="cell">
            <input class="right" type="text" name="Summary" size="50">
        </div>
    </div>
    <div>
        <label class="left cell">Description:</label>
        <div class="cell">
            <textarea class="right" name="Description" style="height:100px;width:400px"></textarea>
       </div>
   </div>
</form>
...

Check it here

Upvotes: 0

Mohammedshafeek C S
Mohammedshafeek C S

Reputation: 1943

You have already used bootstrap framework.so that there is no need to write extra css for inline forms. follow the following code

<div class="form-group">
     <label class="col-lg-3 control-label ">City</label>
      <div class="col-lg-9">
        <div class="form-inline">
          <div class="form-group ">
            <div class="col-lg-12">
              <label class="sr-only" for="city">City</label> 
              <input type="text" id="city" name="city" class="form-control " placeholder="E.g. Thrissur" >
            </div>
          </div> 
          <div class="form-group ">
            <div class="col-lg-12">
              <label class="sr-only" for="county">County</label> 
              <input type="text" id="county" name="county" class="form-control " placeholder="E.g. India" >
            </div>
          </div>
        </div>
      </div>
    </div>

Upvotes: 1

Martin Kokkadan Antony
Martin Kokkadan Antony

Reputation: 86

<input class="right" type="text" name="Description" style="height:100px;width:400px;">

Remove width from input of description, also please change to textarea, instead of input.

Upvotes: 1

jonghyon lee
jonghyon lee

Reputation: 99

try this:

<html>
  <head>
    <title>sample</title>
    <style type="text/css">
      .left {
          width: 30%;
          display: inline-block;
          text-align: right
      }
      .right {
          margin-left: 10px;
          display: inline-block;
      }
    </style>

  </head>

  <body>
      <div class="container">
        <div class="row">
          <div class="col-sm-5 col-sm-push-3 col-xs-4 col-xs-push-2">
            <h1 class="text-center" style="font-family:Colonna MT;font-                    size:50px;color:ForestGreen ; text-align: center">Post Your Ad</h1>
 <form action="post" class="login-form">
      <div>
        <label class="left">Summary:</label>
        <input class="right" type="text" name="Summary" size="50" style="width:400px">
      </div>
    <div>
       <label class="left">Description:</label>       
       <input class="right" type="text" name="Description" style="height:100px;width:400px">
   </div>
 </form>
  </div>
</div>
</div>
</body>
</html>

Upvotes: 0

Starscream1984
Starscream1984

Reputation: 3062

If you're using Bootstrap (as the classes on your code suggest). I would recommend using their form layout options. Sounds like you want a Horizontal Form:

Docs

For Example:

<form class="form-horizontal">
  <div class="form-group">
    <label for="summary" class="col-sm-2 control-label">Summary</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="summary" />
    </div>
  </div>
  <div class="form-group">
    <label for="description" class="col-sm-2 control-label">Description</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="description" style="height:100px;width:400px" />
    </div>
  </div>      
</form>

Upvotes: 1

Rasmus Eskesen
Rasmus Eskesen

Reputation: 246

Like this?
https://jsfiddle.net/d6tscd18/

.left {
  width: 30%;
  display: inline-block;
  text-align: right;
}
.right {
  width: 65%;
  margin-left: 10px;
  display: inline-block;
}

Upvotes: 0

Related Questions