按钮和输入框的css对齐

Question

I want to display textbox first and then button.But now button appears first.I attached css code and html

css
   .search,.stxt{
    float: right;
    }  
html
   <form  method="POST">
     <p style="align:right;">
     <input class="stxt" type="text" name="searchtxt"><a style="padding-right:2ex;"></a>
     <button name="search" class="search">Search</button></p>
   </form>

Answer 1

The nature of floats will prioritise the first element in the list. This is why your input text box is to the right.

I would recommend wrapping your elements within a div and having that float to the right instead.

Answer 2

Just move the button before your input text :

<form  method="POST">
     <p style="align:right;">
     <button name="search" class="search">Search</button></p>
     <input class="stxt" type="text" name="searchtxt"><a style="padding-right:2ex;"></a>
</form>

Or the simpliest way is to put the float right on your <p> tag and remove the others float right

Answer 3

Floating Elements Next to Each Other If you place several floating elements after each other, they will float next to each other if there is room.

So add the same class for both elements like below

HTML:

<form  method="POST">
     <p style="align:right;">
     <input class="stxt alignLeft" type="text" name="searchtxt"><a style="padding-right:2ex;"></a>
     <button name="search alignLeft" class="search">Search</button></p>
   </form>

And remove the float:right; in the .search,.stxt classes in CSS styles and add the following CSS:

 .alignLeft{
    float: left;
    }  
p{
    margin-left: 290px;
}

Fiddle: http://jsfiddle.net/gvmtuo5j/1/

Alternative:

Try Like this:

.search,.stxt{
    float: left;
    }  
p{
    margin-left: 290px;
}

check out this fiddle: http://jsfiddle.net/gvmtuo5j/