我如何在不更改主体的情况下更改div元素的方向

Question

您好，我试图更改div元素的方向（从ltr更改为rtl），以便与阿拉伯语完美显示，但是我不知道如何显示此代码，请帮忙

<div>
    <section id="func1">
      <label for="function"> :دستور الدالة 1 </label>
      <input id="function" type="text" value="x*x" onchange="plot();">
      <p></p>
      <label for="derivative"> :مشتق الدالة 1 </label>
      <input type=text id="der" value="2*x" onchange="plot();">
      <p></p>
      <p></p>
      <label for="color">:لون المنحنى </label>  <input type=color id="color" onchange="plot();">
      <p></p>
    </section>
</div>

这也是描述更多的图片：

输入字段应显示在左侧，文本应显示在右侧

Answer 1

您可以使用CSS属性direction: rtl（参见https://developer.mozilla.org/en-US/docs/Web/CSS/direction）更改文本流向，如下所示：

html {
  direction: rtl;
}

<div>
  <section id="func1">
    <label for="function"> :دستور الدالة 1 </label>
    <input id="function" type="text" value="x*x" onchange="plot();">
    <p></p>
    <label for="derivative"> :مشتق الدالة 1 </label>
    <input type=text id="der" value="2*x" onchange="plot();">
    <p></p>
    <p></p>
    <label for="color">:لون المنحنى </label> <input type=color id="color" onchange="plot();">
    <p></p>
  </section>
</div>

Answer 2

简单地将dir属性的值为rtl，例如：dir="rtl"

检查代码段：

<div dir="rtl">
    <section id="func1">
      <label for="function"> :دستور الدالة 1 </label>
      <input id="function" type="text" value="x*x" onchange="plot();">
      <p></p>
      <label for="derivative"> :مشتق الدالة 1 </label>
      <input type=text id="der" value="2*x" onchange="plot();">
      <p></p>
      <p></p>
      <label for="color">:لون المنحنى </label>  <input type=color id="color" onchange="plot();">
      <p></p>
    </section>
</div>