CODEWITHSUNDEEP
asp.netcss
user3195896
user3195896

Reputation:

Align two input textbox and one button horizontally

I have two inputs, one button and one drop down menu, how do i align it so that its next to each other. I have created div for each element but things dont look right. this is what i have done: 

<div class="class1">
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i>    </span>
    </div>
    <div class="input1" >
        <input type="text" value="" class="form-control" id="deatPicker1">
    </div>
    <div class="class1" >
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i>    </span>
    </div>
    <div class="input1">
        <input type="text" value="" class="form-control" id="deatPicker2">
    </div>

<div class="button" style="display: inline-block;">
    <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search">    </i></button>
</div>

My Css: during this process i have noticed the above example works fine but only if i create another web-page if i use my current web page then things dont stay the way i want

 .class1{
    display: inline-block;
    width: 15px;
  }
 .input1{
    display: inline-block;
    width: 200px;
    padding-left: 20px;
  }

Upvotes: 0

Views: 3532

Answers (2)

Havihavi
Havihavi

Reputation: 672

It looks like you're using bootstrap. So you can align it all using rows and cols.

like so :

  <div class="row class1">
        <div class="col-md-4">
            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i>    </span>
            <input type="text" value="" class="form-control" id="deatPicker1">
        </div>
        <div class="col-md-4">
            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i>    </span>
            <input type="text" value="" class="form-control" id="deatPicker2">
        </div>

         <div class="col-md-4">
        <button type="submit" class="btn btn-default">
        <i class="glyphicon glyphicon-search"></i>Search</button>
            </div>            
</div>

a row gives you a maximum of 12 cols.. so depending on how many aligned items you want, you can do : <div class="col-md-3"></div> x 4 to get a 4 col layout

http://jsfiddle.net/mT6VV/7/

Upvotes: 1

Govinda Rajbhar
Govinda Rajbhar

Reputation: 3034

Try this Code :-

<div class="class1">
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i>    </span>
</div>
<div class="input1" >
    <input type="text" value="" class="form-control" id="deatPicker1">
</div>
<div class="class1" >
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i>    </span>
</div>
<div class="input1">
    <input type="text" value="" class="form-control" id="deatPicker2">
</div>

use this Css :

.class1 {
       display: inline-block;
   }
   .input1 {
       display: inline-block;
       width: 200px;
       padding-left: 20px;
   }
   button {
       width:90px;
       height:20px;
   }

you don't have need to put extradiv tag in your design source.

Demo For Alignment it is working.

Upvotes: 0

Related Questions