Question

我想要我的＆lt; select＆gt;使我的文本向右对齐的元素。这可以通过使用以下解决方案之一来实现： CSS：选择{方向：rtl} HTML ATTRIBUTE：＆lt; select dir =“rtl”＆gt; 这在大多数情况下都能正常工作，但在某种边缘情况下会出现一些令人烦恼的小问题。当您执行以下操作时会发生打嗝：＆lt; select dir =“rtl”＆gt; ＆lt; option value =“1”＆gt; 1个月＆lt; / option＆gt; ＆lt; option value =“2”＆gt; 2个月＆lt; / option＆gt; ＆LT; /选择＆GT; 请注意我的＆lt;选项＆gt;元素以数字开头。当使用dir =“rtl”时，数字向右移动，句子的其余部分被尊重。所以输出将是：第1个月几个月2 现在，如果您使用单词加前缀，例如：＆lt; select dir =“rtl”＆gt; ＆lt; option value =“1”＆gt;某些前缀1个月＆lt; /选项＆gt; ＆lt; option value =“2”＆gt;一些前缀2个月＆lt; /选项＆gt; ＆LT; /选择＆GT; 输出将如下：一些前缀1个月一些前缀2个月身体 { background-color：＃000000; } .form { background-color：#ffffff; 宽度：400px; } .form__row { 边框：1px固体; margin 1rem auto 0 auto; 显示：flex; 辩解内容：空间 - 间隔; } .form__row＆gt; div { 弹性基础：50％; padding-top：0.5rem; 填充底部：0.5rem; } .form__row .label { padding-left：1rem; } .form__row .input { padding-right：1rem; text-align：right; } .form__row选择{ 宽度：100％; 外观：无; -webkit-appearance：none; border-radius：0; background-color：inherit; 方向：rtl; } .form__row输入{ text-align：right; 宽度：100％; } ＆lt; div class = form＆gt; ＆lt; div class =“form__row”＆gt; ＆lt; div class =“label”＆gt;您的姓名：＆lt; / div＆gt; ＆lt; div class =“input”＆gt; ＆lt; input type =“text”placeholder =“your name”value =“这恰好对齐”＆gt; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆lt; div class =“form__row”＆gt; ＆lt; div class =“label”＆gt;多长时间：＆lt; / div＆gt; ＆lt; div class =“input”＆gt; ＆LT;选择＆GT; ＆lt; option value =“1”＆gt; 1个月＆lt; / option＆gt; ＆lt; option value =“2”＆gt; 2个月＆lt; / option＆gt; ＆lt; option value =“1”＆gt;前缀1个月＆lt; /选项＆gt; ＆lt; option value =“2”＆gt;前缀2个月＆lt; / option＆gt; ＆LT; /选择＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; 你可以在这里查看小提琴我认为这与“从右到左”（阿拉伯语，希伯来语......）语言可能与数字有关。我记得曾经读过一次，他们倾向于对数字的放置方式有一些约定。 TL; DR /摘要是否有另一种方法可以使用＆lt; select＆gt;向右对齐文本元件？还是一个干净的解决方法？我可以将我的数字改为书面数字（一，二，......），但我希望有另一种选择。因为在我的情况下，数字最多可达24。

Answer 1

如果您只是希望选择的文字正确但不关心选项，则可以使用text-align-last: right：

＆＃13;

select {
  text-align-last: right;
}

＆＃13;

<select>
    <option value="1">1 Month</option>
    <option value="2">2 Months</option>
</select>

＆＃13;

或者如果箭头位于左侧并不重要，您可以将rtl <select>和ltr合并为<option> ：

＆＃13;

select {
  direction: rtl;
}

select option {
  direction: ltr;
}

＆＃13;

<select>
    <option value="1">1 Month</option>
    <option value="2">2 Months</option>
</select>

＆＃13;

Answer 2

这是使用您自己的代码的正确方法

这对你有用 -

只需在direction: ltr;中使用<option>，一切正常：

.form__row select option {
    direction: ltr;
}

＆＃13;

body {
  background-color: #000000;
}

.form {
  background-color: #ffffff;
  width: 400px;
}

.form__row {
  border: 1px solid;
  margin 1rem auto 0 auto;
  display: flex;
  justify-content: space-between;
}

.form__row>div {
  flex-basis: 50%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.form__row .label {
  padding-left: 1rem;
}

.form__row .input {
  padding-right: 1rem;
  text-align: right;
}

.form__row select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  background-color: inherit;
  direction: rtl;
}

.form__row select option {
    direction: ltr;
}
.form__row input {
  text-align: right;
  width: 100%;
}

＆＃13;

<div class=form>
  <div class="form__row">
    <div class="label">Your Name : </div>
    <div class="input">
      <input type="text" placeholder="your name" value="This aligns right nicely">
    </div>
  </div>
  <div class="form__row">
    <div class="label">How long : </div>
    <div class="input">
      <select>
          <option value="1">1 Month</option>
          <option value="2">2 Months</option>
          <option value="1">Prefixed 1 Month</option>
          <option value="2">Prefixed 2 Months</option>
        </select>
    </div>
  </div>
</div>

＆＃13;

Answer 3

怎么样？

 <select style="text-align:right">
    <option  value="1">1 Month</option>
    <option value="2">2 Months</option>
</select>

文本 - 右对齐<select>，文本以数字开头

3 个答案: