How to appear two HTML input elements in single line (row)


Tags: html,css

Problem :

This code

HTML

<input type="text" name="category" id="category" value="">&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="category_1" id="category_1" value="" tabindex="1"></div>

Though with repeated efforts starting from adding tabindex, nbsp to css cannot have these two inputs appear on single line.

CSS

<style type="text/css">
    input.category {
      vertical-align:top;
   }
 </style>

UPDATE

I think there is a plugin css which is over-ridding this behaviour. I have applied all what you guys said nothing works here is the css. I'm using plugin mcdropdown. Here is the code at start is just the copy of style followed with is is the css copy paste of mcdropdown.css file.

Please let me know how this can be done.



Solution :

add class="category" for input fields and css:

.category {
  float: left;
  display: block;
}

#category_1 {
  margin-left: 20px; /* or space you want..*/
}

and remove those spaces (&nbsp;) not really good way to code :)

Benefit of changing element display to block is that you can set vertical margins and paddings to it when needed.

Example usage with labels could be:

html:

<div class="col1">
  <label for="field1">Field1 title</label>
  <input type="text" name="field1" id="field1" /> 
</div>

<div class="col2">
  <label for="field2">Field2 title</label>
  <input type="text" name="field2" id="field2" /> 
</div>

<div class="clearfix"></div>

CSS:

.col1 {
  float: left;
  width: 200px;
}

.col2 {
  float: left;
  width: 200px;
}

.clearfix:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

    CSS Howto..

    CSS - How to horizontally center table whos position is absolute

    How can I fix this 3-column layout?

    How to create the Facebook Status arrowed textbox?

    How to auto resize the parent node according to its children

    How to keep sub div from considering height of its cousin?

    How to draw a horizontal line between two circles with css?

    How to make the headline (H1 with lines on the sides) with CSS only

    How to Pause ALL CSS animations?

    How to style my HTML form using CSS

    how I can change the size of font inside PHP

    How can I cut long text according to available div area size?

    Using CSS how to change only the 2nd column of a table

    How to remove the blue halo glow from jQuery Mobile input elements that receive focus

    How to indent items of a sublist using css and html in wordpress

    How to “crop” a rectangular image into a square with CSS?

    How to make CSS drop down menu appear/change on click

    How to change pseudo class property?

    How to create an overlay to be used under a pop up

    how to make target link work giving different css properities

    Article container expands to show all content in standard mode, works fine in quirks mode. Only part wrong

    how to switch to another view using css class on click in angularjs using ngclass

    How do I change the text inside a button?

    CSS how to place an image to the right of variable width text on roll over?

    How to activate jQuery function with img instead of button?

    How to apply different styles based on the number oif col in a table

    How do you Add an image to the left side of a div

    how to specify a different image in css depending if the user visits on a desktop or a mobile browser

    How to Hide a Textbox with only CSS

    How to create a 3 column (ul, li) header that (responsive) collapse one below another?

    Newbie: How to have a row background in my case?