显示：灵活和对齐内容：空间均匀

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

首先，fnum-id应该是页面上一个元素的唯一id。在这种情况下，您应该使用类而不是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文件中编写的，或者是在标记中编写的。空间均匀属性受元素宽度的影响，您可以向h3添加固定宽度，并使用输入元素

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

或者，你可以给每个h3元素一个类，并将样式添加到其中，然后对我们之前创建的fnum类进行样式设置，例如

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

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

Answer 2

我可以提供这样的解决方案。在css中设置此规则：

.scoreItem h3 {
width: 90px;
}

其中，宽度90px是最长标记h3-生产的宽度。

.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>