如何修改div元素排版方向（LTR转RTL）适配阿拉伯语且不影响body

没问题，咱们可以通过CSS精准调整这个<div>的排版方向，完全不影响页面主体的LTR布局，同时实现输入框在左侧、阿拉伯语文本在右侧的需求。下面是具体的实现步骤和代码：

1. 优化HTML结构（可选但更规整） #

首先把每组标签和输入框包裹在一个小容器里，这样布局更容易控制：

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

2. 添加CSS样式实现需求 #

通过CSS给目标容器设置RTL方向，同时用Flex布局调整元素顺序：

/* 仅给目标容器设置RTL，完全不影响body */
.rtl-container {
  direction: rtl;
  width: fit-content; /* 让容器宽度适配内容，避免过度拉伸 */
}

/* 控制每组输入框和标签的布局 */
.rtl-container .input-group {
  display: flex;
  flex-direction: row-reverse; /* 反转排列顺序，让输入框在左、标签在右 */
  align-items: center; /* 垂直居中对齐，视觉更舒适 */
  margin-bottom: 15px; /* 每组之间保留间距 */
}

/* 给标签和输入框之间添加间距 */
.rtl-container .input-group label {
  margin-right: 10px;
}

效果说明 #

• direction: rtl确保阿拉伯语文本的标点、排版符合RTL规范，不会出现显示错乱；
• flex-direction: row-reverse完美实现了输入框在左侧、标签文本在右侧的布局；
• 所有样式仅作用于.rtl-container内部元素，完全不会影响页面其他部分的LTR布局。

如果你不想修改HTML结构，也可以用以下CSS直接适配原代码：

.rtl-container {
  direction: rtl;
  width: fit-content;
}

.rtl-container #func1 input {
  float: left;
  clear: left;
  margin-right: 10px;
}

.rtl-container #func1 label {
  display: inline-block;
  margin-bottom: 15px;
}

这个方案同样能达到需求，不过用Flex布局的结构会更清晰易维护~

内容的提问来源于stack exchange，提问作者Salah Eddine Makdour