当 DIV 类包含“显示”声明时，使用 style.textAlign 不起作用

Question

使用以下方法，单击“Try Me”按钮将 DIV 内容向右对齐：

function myFunction() {
    const divs = document.getElementsByClassName("outer_div");
    for (let i = 0; i < divs.length; i++) {
        let loop_div = divs.item(i);
        loop_div.style.textAlign = "right";
    }
}

.outer_div {
    margin:0px;
    text-align: center;
    justify-content: center;
    align-items: center;
}

<div class="outer_div" style="background: white;">
  Test One
</div>
<div class="outer_div" style="background: white;">
  Test Two
</div>
<div class="outer_div" style="background: white;">
  Test Three
</div>

<hr>

<button onclick="myFunction()">Try it</button>

我想解决的问题是，如果

outer_div

的 CSS 包含以下内容：

display: flex;

这会阻止按钮的右对齐功能工作。

示例如下：

function myFunction() {
    const divs = document.getElementsByClassName("outer_div");
    for (let i = 0; i < divs.length; i++) {
        let loop_div = divs.item(i);
        loop_div.style.textAlign = "right";
    }
}

.outer_div {
    margin:0px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

<div class="outer_div" style="background: white;">
  Test One
</div>
<div class="outer_div" style="background: white;">
  Test Two
</div>
<div class="outer_div" style="background: white;">
  Test Three
</div>

<hr>

<button onclick="myFunction()">Try it</button>

有什么办法可以解决吗？

很抱歉我提出这个问题可能违反了所有规则。

谢谢

Answer 1

您需要使用

justify-content

例如：

function myFunction() {
    const divs = document.getElementsByClassName("outer_div");
    for (let i = 0; i < divs.length; i++) {
        let loop_div = divs.item(i);
        loop_div.style.justifyContent = "flex-end";
    }
}

.outer_div {
    margin:0px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

<div class="outer_div" style="background: white;">
  Test One
</div>
<div class="outer_div" style="background: white;">
  Test Two
</div>
<div class="outer_div" style="background: white;">
  Test Three
</div>

<hr>

<button onclick="myFunction()">Try it</button>