グリフコンを右に浮かせるにはどうすればいいですか？

Question

私は検索テキストボックスを持っています。このよう

：この私と一緒に働いて

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<li> 
 
    <div class="form-search"> 
 
    <form action="#" class="entypo-search glyphicon glyphicon-search"> 
 
     <fieldset><input id="search" placeholder="Search" /></fieldset> 
 
    </form> 
 
    </div> 
 
</li>

。しかし、私はglyphicon glyphicon-searchがテキストボックスの右側に浮動小数点表示されます。

私はから追加しようとしました：へ

<form action="#" class="entypo-search glyphicon glyphicon-search"> 

：

しかしform要素に適用することはできません。

したがって、要素でフォームをラップしようとしました。

しかし、あなたが見ることができます：見える位置が隠されています。

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<li> 
 
    <div class="form-search"> 
 
    <div class="glyphicon glyphicon-search icon-arrow-right pull-right"> 
 
     <form action="#" class="entypo-search"> 
 
     <fieldset><input id="search" placeholder="Search" /></fieldset> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</li>

Answer 1

.entypo-searchスタイルは.glyphiconによって上書きされているので、あなたのスタイルに!importantを追加する必要があります。またright: 0はleftプロパティの代わりに.entypo-search:beforeに設定する必要があります。

アウトcodepenリンクhttp://codepen.io/jarun/pen/Zpzbwo

.entypo-search:before { 
 
    position: absolute; 
 
    top: 0.4em; 
 
    right: 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 !important; 
 
    top: 30% !important; 
 
    right: 0; 
 
} 
 

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<li> 
 
    <div class="form-search"> 
 
    <form action="#" class="entypo-search glyphicon glyphicon-search"> 
 
     <fieldset><input id="search" placeholder="Search" /></fieldset> 
 
    </form> 
 
    </div> 
 
</li>

Answer 2

あなたはクラスhas-feedbackを使用して入力した後、spanに​​を移動することができます。これは既にブートストラップで行われているので、CSSを必要としません。

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<li> 
 
    <div class="form-search"> 
 
    <form action="#" class="entypo-search has-feedback"> 
 
     <fieldset> 
 
     <input id="search" placeholder="Search" /> 
 
     <span class="glyphicon glyphicon-search form-control-feedback" aria-hidden="true"></span> 
 
     </fieldset> 
 
    </form> 
 
    </div> 
 
</li>