如何更改宽度并保留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>