方向：RTL 不适用于非数字符号。为什么？答案

【问题标题】：Direction: RTL does not apply to non-numerical symbols. Why?方向：RTL 不适用于非数字符号。为什么？
【发布时间】：2018-07-30 09:05:46
【问题描述】：

我正在尝试创建一个计算器。对于计算器显示屏内的文本，我使用了direction:rtl。它适用于数字。但是，对于其他符号 (+-*/)，rtl 似乎无法正常工作。它们出现在数字的错误一侧（左侧而不是右侧）。尤其 *。这是为什么呢？

这是JS Fiddle

<!DOCTYPE html>
<html>
  <head>
    <title>
      Calculator
    </title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
  </head>
  <body>
    <div class="container">
      <div class="wrapper">

        <div class="display" id="display">
          <p class="displayText" id="displayText">8008135
          </p>
        </div>

        <div class="cancel button special"><button class="module-button" onclick="cancel()">CANC</button></div>
        <div class="del button special"><button class="module-button" onclick="del()">DEL</button></div>

        <div class="plus button operation"><button class="module-button" onclick="clickOperationButton('+','+')">+</button></div>
        <div class="minus button operation"><button class="module-button" onclick="clickOperationButton('-','-')">-</button></div>
        <div class="multiply button operation"><button class="module-button" onclick="clickOperationButton('*','×')">×</button></div>
        <div class="divide button operation"><button class="module-button" onclick="clickOperationButton('/','÷')">÷</button></div>


        <div class="seven button number"><button class="module-button" onclick="clickNumberButton(7)">7</button></div>
        <div class="eight button number"><button class="module-button" onclick="clickNumberButton(8)">8</button></div>
        <div class="nine button number"><button class="module-button" onclick="clickNumberButton(9)">9</button></div>

        <div class="four button number"><button class="module-button" onclick="clickNumberButton(4)">4</button></div>
        <div class="five button number"><button class="module-button" onclick="clickNumberButton(5)">5</button></div>
        <div class="six button number"><button class="module-button" onclick="clickNumberButton(6)">6</button></div>

        <div class="one button number"><button class="module-button" onclick="clickNumberButton(1)">1</button></div>
        <div class="two button number"><button class="module-button" onclick="clickNumberButton(2)">2</button></div>
        <div class="three button number"><button class="module-button" onclick="clickNumberButton(3)">3</button></div>

        <div class="decimal button number"><button class="module-button" onclick="clickNumberButton('.')">.</button></div>
        <div class="zero button number"><button class="module-button" onclick="clickNumberButton(0)">0</button></div>
        <div class="equal button number"><button class="module-button" onclick="equate()">=</button></div>

      </div>
    </div>
  </body>
  <script>

  let digitsArray = [];
  let digitsString = "";
  let displayOutput = "";
  let pressedButtonsArray = [];
  let result;

  function clickNumberButton(button) {
    //Equation has happened//
    if (pressedButtonsArray[pressedButtonsArray.length-1] == "=") {
      pressedButtonsArray = [];
      pressedButtonsArray.push(button);
      pressedButtonsString = pressedButtonsArray.join("");
      document.getElementById("displayText").innerHTML = pressedButtonsString;
    }
    //Equation hasn't happened//
    else {
      pressedButtonsArray.push(button);
      pressedButtonsString = pressedButtonsArray.join("");
      document.getElementById("displayText").innerHTML = pressedButtonsString;
      console.log(pressedButtonsArray);
    }
  }

  function clickOperationButton(button, symbol) {
    if (pressedButtonsArray.length > 0 && (/[0123456789]/.test(pressedButtonsArray[pressedButtonsArray.length-1])) || button == "-") {
      if (pressedButtonsArray[pressedButtonsArray.length-1] == "=") {
        pressedButtonsArray = [];
        pressedButtonsArray.push(result, button);
        pressedButtonsString = pressedButtonsArray.join("");
        document.getElementById("displayText").innerHTML = pressedButtonsString;
      }
      else {
        pressedButtonsArray.push(button);
        pressedButtonsString = pressedButtonsArray.join("");
        document.getElementById("displayText").innerHTML = pressedButtonsString;
      }
    }
    console.log(pressedButtonsArray);
  }

  function equate() {
    if (pressedButtonsArray.length > 0 && (/[0123456789]/.test(pressedButtonsArray[pressedButtonsArray.length-1]))) {
      pressedButtonsArray.push("=");
      result = eval(pressedButtonsString);
      document.getElementById("displayText").innerHTML = result;
      console.log(pressedButtonsArray);
    }
  }

  function del() {
    if (pressedButtonsArray[pressedButtonsArray.length-1] == "=") {
      pressedButtonsArray = [];
      pressedButtonsString = "";
      result = "";
      document.getElementById("displayText").innerHTML = "";
    }
    else {
      pressedButtonsArray.splice(-1,1)
      pressedButtonsString = pressedButtonsArray.join("");
      document.getElementById("displayText").innerHTML = pressedButtonsString;
    }
    console.log(pressedButtonsArray);
  }

  function cancel() {
    pressedButtonsArray = [];
    pressedButtonsString = "";
    result = "";
    document.getElementById("displayText").innerHTML = "";
  }

  </script>

</html>

风格：

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 100px;
  font-family: sans-serif;
}

.container {
  width: 40%;
  height: auto;
}

.display {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 80px;
  grid-column-start: 1;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 2;
}

.cancel {
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row-start: 2;
  grid-row-end: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}

.del {
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 2;
  grid-row-end: 3;
}

.divide {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 2;
  grid-row-end: 3;
}

.multiply {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 3;
  grid-row-end: 4;
}

.minus {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 4;
  grid-row-end: 5;
}

.plus {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 5;
  grid-row-end: 7;
}

.seven {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
}

.eight {
  grid-column-start: 4;
  grid-column-end: 7;
  grid-row-start: 3;
  grid-row-end: 4;
}

.nine {
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 3;
  grid-row-end: 4;
}

.four {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 4;
  grid-row-end: 5;
}

.five {
  grid-column-start: 4;
  grid-column-end: 7;
  grid-row-start: 4;
  grid-row-end: 5;
}

.six {
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 4;
  grid-row-end: 5;
}

.one {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 5;
  grid-row-end: 6;
}

.two {
  grid-column-start: 4;
  grid-column-end: 7;
  grid-row-start: 5;
  grid-row-end: 6;
}

.three {
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 5;
  grid-row-end: 6;
}

.decimal {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 6;
  grid-row-end: 7;
}

.zero {
  grid-column-start: 4;
  grid-column-end: 7;
  grid-row-start: 6;
  grid-row-end: 7;
}

.equal {
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 6;
  grid-row-end: 7;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 35px;
  border: thin black solid;
}

.display {
  background-color: #DABE4A;
  align-items: center;
  justify-content: center;
  display: flex;
}

.displayText {
  width: 100%;
  direction: rtl;
  }

.special {
  background-color: #C6CE71;
}

.operation {
  background-color: #8CD4B9;
}

.number {
  background-color: #153058;
}

.module-button {
  background-color: inherit;
  font: inherit;
  border: none;
  width: 100%;
  height: 100%;
}

.module-button:focus {outline:0;}

.module-button:hover {
  filter:brightness(1.5);
}

.module-button:active {
  filter:brightness(1);
}

【问题讨论】：

标签： javascript right-to-left direction

【解决方案1】：

在您的情况下，您应该使用 text-align: right 而不是 rtl

只需更改此 css：

.displayText {
  width: 100%;
  text-align: right;
 }

它应该可以工作。

这是您的代码工作的 jsfiddle：https://jsfiddle.net/1g70b64c/1/

【讨论】：

这行得通，除了数字被推到右边而不是左边。
@Benisburgers 通常Calculators 将数字推到右侧而不是左侧，但如果您希望将数字推到左侧，只需输入 text-align: left
我有。它对我不起作用。谢谢你。它仍然推到右边。
我最终使用了这个解决方案：link