html语言中glyphicon,html - How to move glyphicon to float right? - Stack Overflow

I have a search textbox.

Like this:

.entypo-search:before {

position: absolute;

top: 0.4em;

left: 0px;

}

li.lien-he-padding{

padding-right: 40px;

}

.form-search {

background-color: white;

border-radius: 30px;

padding: 20px 20px;

width: 13px;

overflow: hidden;

position: absolute;

height: 30px;

right: 50%;

-webkit-transition: width .55s ease;

-moz-transition: width .55s ease;

-ms-transition: width .55s ease;

-o-transition: width .55s ease;

transition: width .55s ease;

}

form {

position: relative;

}

input {

width: 0px;

height: 25px;

font-size: 15px;

margin-left: 30px;

margin-top: -5px;

line-height: 30px;

border: none;

}

.entypo-search {

position: absolute;

top: 30%;

}

.form-search:hover {

border: 1px solid #b3cccc;

width: 230px;

}

.form-search:hover form input {

width: 200px;

}

.form-search form input:focus,

.form-search form input:active{

outline:none;

width: 300px;

}

li div.form-search:hover {

color: orange;

cursor: pointer;

}

This working with me. But I want the glyphicon glyphicon-search float to the right of the text box.

I tried to add from:

to:

But can't apply to form element.

So, I tried to wrap form with element.

But you can see: seem position of is hidden.

.entypo-search:before {

position: absolute;

top: 0.4em;

left: 0px;

}

.form-search {

background-color: gray;

border-radius: 30px;

padding: 20px 20px;

width: 13px;

overflow: hidden;

position: absolute;

height: 30px;

right: 50%;

-webkit-transition: width .55s ease;

-moz-transition: width .55s ease;

-ms-transition: width .55s ease;

-o-transition: width .55s ease;

transition: width .55s ease;

}

form {

position: relative;

}

input {

width: 0px;

height: 25px;

font-size: 15px;

margin-left: 30px;

margin-top: -5px;

line-height: 30px;

border: none;

}

.entypo-search {

position: absolute;

top: 30%;

}

.form-search:hover {

border: 1px solid #b3cccc;

width: 230px;

}

.form-search:hover form input {

width: 200px;

}

.form-search form input:focus,

.form-search form input:active{

outline:none;

width: 300px;

}

li div.form-search:hover {

color: orange;

cursor: pointer;

}