代码之家 › 专栏 › 技术社区 › Segers-Ian

文本右对齐<选择>以数字开头的文本

css html

Segers-Ian · 技术社区 · 8 年前

<select> 元素使文本向右对齐。这可以通过使用以下解决方案之一来实现:

CSS select{direction: rtl}

HTML属性 <select dir="rtl">

这在大多数情况下都可以正常工作,但在某些边缘情况下会出现一个令人讨厌的小问题。

当您执行以下操作时,会发生打嗝:

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

<option> 元素以a开头数字 . 使用时 dir="rtl"

第1个月

现在,如果你用一个单词作为前缀,比如:

<select dir="rtl">
    <option value="1">Some Prefix 1 Month</option>
    <option value="2">Some Prefix 2 Months</option>
</select>

输出如下:

一些前缀2个月

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 input {
  text-align: right;
  width: 100%;
}

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

fiddle here

我认为这与“从右到左”(阿拉伯语、希伯来语等)有关语言可能与数字有关。我记得有一次读到,他们对数字的放置方式往往有一些特定的规则。

有没有另一种方法可以将文本与 <选择(>); 要素还是一个干净的解决方法?我可以把我的数字改成书面数字(一,二,…),但我希望有另一种选择。因为在我的例子中,数字上升到24。

3 回复 | 直到 8 年前

Jithin Raj P R 8 年前

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

这对你有用-

只需使用 direction: ltr; <option> 一切都会很好:

.form__row select option {
    direction: ltr;
}

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

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

lumio 8 年前

text-align-last: right :

select {
  text-align-last: right;
}

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

rtl 对于 <select> 和 ltr <option> :

select {
  direction: rtl;
}

select option {
  direction: ltr;
}

<<选项值=“2”>2个月</选项>
</选择(>);

jetblack 8 年前

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