CODEWITHSUNDEEP
htmlcss
user3066819
user3066819

Reputation: 359

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

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.

Upvotes: 2

Views: 9968

Answers (6)

Hardy
Hardy

Reputation: 5631

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;
}

Upvotes: 3

Dparchmentjr
Dparchmentjr

Reputation: 43

To get them to display on a single line use the css display attribute to change their display to inline here is how I do it:

<html>
<head>
    <style>
        #category, #category_1{
            display: inline;
        }
    </style>
</head>
<body>
    <input type="text" name="category" id="category" value="">
    <input type="text" name="category_1" id="category_1" value="" tabindex="1">

</body>

That should solve your problem and it's really simple to! Have a great day!

Upvotes: 3

Prasanth K C
Prasanth K C

Reputation: 7332

This answer is a wild guess operation, Try

Try applying below CSS to over-ride:

input.category {
      float:left !important;
      margin: 0 !important;
      padding:0 !important;
      clear:none !important;
   }

and apply .category class to both your input (*SEE FIDDLE)

FIDDLE DEMO

Upvotes: 1

Krish R
Krish R

Reputation: 22711

Can you try this, By default your elements aligned and dispalyed in single line. If you want to apply any css styling or css properties then you may use as like in below. Added class in input elements class="category"

CSS:

<style type="text/css">
    input.category {
       float:left;
          width:100px;
   }
 </style>

HTML:

<div style='width:500px;'>
    <input type="text" name="category" id="category" value="" class="category">
    <input type="text" name="category_1" id="category_1" value="" class="category" tabindex="1">
</div>

Upvotes: 1

n1kkou
n1kkou

Reputation: 3142

You can do that by removing float, and add display:inline-block. Here: http://jsfiddle.net/xW3tt/2/

Upvotes: 1

m1kael
m1kael

Reputation: 2851

They are both inline elements and should appear on the same line by default. Close your input tags appropriately (<input... />) and remove the closing </div> tag:

change

<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>

to

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

Upvotes: 1

Related Questions