显示：flex 和 justify-content：space-evenly

Question

伙计们。

只是关于 CSS 和 javascript 的问题。

我有这段代码，但我需要使输入区域居中。

由于某些原因，即使长度相同，它们也没有对齐。

我知道文字大小会影响 flex 的位置，但我不明白这是怎么回事。

抱歉这个愚蠢的问题，我才刚刚开始学习。

<div class="playersDiv">
            <div class="players player1">
                <h2>Player Name</h2>
                <div class="showInput">
                    <input type="playerInput1" name="playerInput1" id="playerInput1">
                    <button class="addPlayerBtn">Add Player</button>
                </div>
            </div>
            <div class="scoreDiv">
                <p>Input below the quantity of each tile in the end of the game:</p>
                <div class="scoreItem">
                    <h3>Forest</h3>
                    <input type="number" name="fnum" id="fnum">
                    <p>10</p>
                </div>
                <div class="scoreItem">
                    <h3>Town</h3>
                    <input type="number" name="fnum" id="fnum">
                    <p>10</p>
                </div>
                <div class="scoreItem">
                    <h3>Production</h3>
                    <input type="number" name="fnum" id="fnum">
                    <p>10</p>
                </div>
                <div class="scoreItem">
                    <h3>Factory</h3>
                    <input type="number" name="fnum" id="fnum">
                    <p>10</p>
                </div>
            </div>
        </div>

.scoreItem{
    display: flex;
    justify-content: space-evenly;
    margin: 0 auto 0.5rem auto;
    height: 2rem;
}
#fnum {
    margin: 0 1rem;
}

Answer 1

我可以提供这样的解决方案。在 css:

中设置此规则

.scoreItem h3 {
   width: 90px;
}

其中宽度 90px 是最长标签的宽度 h3 - Production.

.scoreItem{
    display: flex;
    justify-content: space-evenly;
    margin: 0 auto 0.5rem auto;
    height: 2rem;
}

#fnum {
    margin: 0 1rem;
}

.scoreItem h3 {
  width: 90px;
}

<div class="playersDiv">
            <div class="players player1">
                <h2>Player Name</h2>
                <div class="showInput">
                    <input type="playerInput1" name="playerInput1" id="playerInput1">
                    <button class="addPlayerBtn">Add Player</button>
                </div>
            </div>
            <div class="scoreDiv">
                <p>Input below the quantity of each tile in the end of the game:</p>
                <div class="scoreItem">
                    <h3>Forest</h3>
                    <input type="number" name="fnum" id="fnum">
                    <p>10</p>
                </div>
                <div class="scoreItem">
                    <h3>Town</h3>
                    <input type="number" name="fnum" id="fnum">
                    <p>10</p>
                </div>
                <div class="scoreItem">
                    <h3>Production</h3>
                    <input type="number" name="fnum" id="fnum">
                    <p>10</p>
                </div>
                <div class="scoreItem">
                    <h3>Factory</h3>
                    <input type="number" name="fnum" id="fnum">
                    <p>10</p>
                </div>
            </div>
        </div>

Answer 2

首先，fnum id 应该是页面上一个元素的唯一 ID。在这种情况下，您应该使用 classes 而不是 id:

<input type="number" name="fnum" class="fnum">

然后，在您的 css 中您应该使用 .而不是#:

.fnum {
   margin: 0 1rem;
}

name 属性也应该是唯一的，因为这是您从后端访问数据的方式。例如

<input type="number" name="production-fnum" class="fnum">
<input type="number" name="factory-fnum" class="fnum">

假设您的 CSS 是写在一个单独的 .css 文件中，或者在标签中。 space-evenly 属性受元素宽度影响，您可以为 h3 和 input 元素添加固定宽度：

h3 {
  width: 150px;
}
input {
  width: 150px;
}

或者，您可以给每个 h3 元素一个 class 并向其添加样式，并为我们之前创建的 fnum class 设置样式，例如

<h3 class="label">Factory</h3>
.label{width: 150px}
.fnum{width: 150px}

此外，我会使用标签而不是 h3 (https://www.w3schools.com/tags/tag_label.asp)

显示：flex 和 justify-content：space-evenly

display: flex & justify-content: space-evenly

html

javascript

css

display