Question

我遇到RTL表单问题，特别是＆lt; select＆gt;项目。我已设法将所有标签和输入设为RTL，但＆lt; select＆gt;除外，下拉列表将显示在其标签的顶部。我花了好几个小时试图让它出现在标签的左边。以下是它的外观： RTL表格几小时后我设法做到这样：为选择项添加CSS后的RTL表单如您所见，我已设法将其设置在标签的左侧，但箭头位于标签的顶部！这种微小的形式让我发疯。这是我的HTML：＆lt; div class =“list list-inset”＆gt; ＆lt; form name =“registrationForm”class =“parent”＆gt; ＆lt; div class =“item item-divider”＆gt; المعلوماتالشخصية ＆LT; / DIV＆GT; ＆lt; label class =“item item-input”＆gt; ＆lt; span class =“input-label”＆gt;الإسم＆lt; / span＆gt; ＆lt; input type =“text”name =“nameInput”ng-model =“newUser.first_name”required＆gt; ＆LT; /标签＆gt; ＆lt; label class =“item item-input”＆gt; ＆lt; span class =“input-label”＆gt;الإيميل＆lt; / span＆gt; ＆lt; input class =“emailinput”type =“email”name =“emailInput”ng-model =“newUser.email”required＆gt; ＆LT; /标签＆gt; ＆lt; label class =“item item-input item-select”＆gt; ＆lt; span class =“input-label”＆gt;المدينة＆lt; / span＆gt; ＆lt; select ng-model =“newUser.billing_address.state”name =“cityInput”ng-init =“newUser.billing_address.state ='الرياض'”required＆gt; ＆LT;选项＆GT;الرياض＆LT; /选项＆GT; ＆LT;选项＆GT;جدة＆LT; /选项＆GT; ＆LT;选项＆GT;الدمام＆LT; /选项＆GT; ＆LT; /选择＆GT; ＆LT; /标签＆gt; ＆LT; / DIV＆GT; 这是第一种情况的CSS： .parent { 方向：rtl; text-align：right; } .parent span { 方向：ltr; } 这是我添加的CSS，使它看起来像第二个图像： .item-select选择 { 对：汽车; 顶部：0px; 宽度：350px; 方向：rtl; } 任何想法都表示赞赏。谢谢！

Answer 1

如果有人遇到同样的问题。以下是如何解决它：

.item-select select {
padding: 0 16px 0 48px;
right: auto;
left: 0;
direction: rtl;
width: 350px
}

.item-select:after {
left: 16px;
right: auto;
}

RTL表格问题<select>下拉 - 离子

1 个答案: