如何更改寬度並保留rtl？

Question

這裏是我的代碼：

$(document).on('focus', '.search_input',function(){ 
 
    $(this).animate({'width':'88%'}); 
 
});

.search_box{ 
 
    margin: 10px 30px; 
 
    direction: rtl; 
 
    
 
} 
 

 
.search_icon{ 
 
    display: inline-block; 
 
    position: absolute; 
 
    margin-top: 1px; 
 
    padding: 0px 3px; 
 
    border-left: 1px solid; 
 
} 
 

 
.search_input{ 
 
    padding-right: 55px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="search_box"> 
 
    <div class="search_icon">search</div> <!-- in reality it is a magnifier icon --> 
 
    <input class="search_input" type="text" /> 
 
</div>

所有我想要做的就是改變輸入的位置。注意到search這個詞仍然應該在輸入的右側。

換句話說，輸入應該在頁面的左側，其width應該增加到右側。再次，總是search的字和輸入的方向應該在輸入的右側（rtl）。

我該怎麼做？

Answer 1

嘗試我扭捏了一下你的代碼片段，是你在找什麼？

你正在申請direction: rtl整個.search_box div，這就是爲什麼一切都在右邊。

$(document).on('focus', '.search_input',function(){ 
 
    $(this).animate({'width':'88%'}); 
 
});

.search_box{ 
 
    margin: 10px 30px; 
 
} 
 

 
.search_icon{ 
 
    display: inline-block; 
 
    margin-top: 1px; 
 
    margin-left: -55px; 
 
    padding: 0px 3px; 
 
    border-left: 1px solid; 
 
} 
 

 
.search_input{ 
 
    padding-right: 55px; 
 
    direction: rtl; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="search_box"> 
 
    <input class="search_input" type="text" /> 
 
    <div class="search_icon">search</div> 
 
</div>

Answer 2

您可以通過添加text-align:left屬性類search_box

$(document).on('focus', '.search_input', function() { 
 
    $(this).animate({ 
 
    'width': '88%' 
 
    }); 
 
});

.search_box { 
 
    margin: 10px 30px; 
 
    direction: rtl; 
 
    text-align:left 
 
} 
 

 
.search_icon { 
 
    display: inline-block; 
 
    position: absolute; 
 
    margin-top: 1px; 
 
    padding: 0px 3px; 
 
    border-left: 1px solid; 
 
} 
 

 
.search_input { 
 
    padding-right: 55px; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="search_box"> 
 
<div class="search_icon">search</div> 
 
<input class="search_input" type="text" /> 
 
    
 
    <!-- in reality it is a magnifier icon --> 
 
    
 
</div>