我已經在這個問題上停留了幾個小時，并嘗試了我能想到的一切。
本質上，我有一個表單，它在兩個單獨的輸入框/欄位中接受一個電子郵件地址和一個令牌，我將整個表單居中并將兩個框放在不同的行上，但是當我仔細觀察（和測量）時，兩個文本框用于要輸入的用戶，錯位了 8 個像素，這讓我的強迫癥發瘋了。這是我為表單提供的代碼。
<form id = "order" method = "POST" action ="/orderemail">
<label class="text-info" for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Email:</label>
<input style="text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="email" id="email" name="email" placeholder="Enter your email" required><br><br>
<label class="text-info" for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Token:</label>
<input style="text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="text" id="token" name="token" placeholder="Enter your token" required>
</form>
我已經仔細檢查過，“文本資訊”CSS 根本沒有導致它，我嘗試洗掉所有其他 CSS 樣式/對我可以看到的類的參考而沒有解決問題。我也包含了代碼的影像。
代碼
uj5u.com熱心網友回復：
這是因為您的標簽沒有相同的寬度。單詞，即使具有相同數量的字母，也可以比彼此更小/更寬，具體取決于您使用的字體。例如，“W”通常比“I”占用更多空間。
需要做的是在標簽上放置寬度/最小寬度，使用列或使用表格。您可能也可以做其他事情，但最后，您需要確保標簽和輸入之間存在某種“空間分隔”。
uj5u.com熱心網友回復：
如果你想超級對齊，你可以在標簽上放一個填充。標簽文本是問題所在。但是如果這對您來說很重要，您可以使用填充，如下所示；
<form id = "order" method = "POST" action ="/orderemail">
<label class="text-info" for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large; padding-right:2px;">Email:</label>
<input style="text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="email" id="email" name="email" placeholder="Enter your email" required><br><br>
<label class="text-info" for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Token:</label>
<input style="text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="text" id="token" name="token" placeholder="Enter your token" required>
</form>uj5u.com熱心網友回復：
如果您有權訪問 HTML 以將每個input和label配對放入容器中，flexbox則在該容器上使用是一種很好的動態方式。
您可以flex: 1;在input-element 上使用以確保它們的大小相同。
flex: 1;是以下的簡寫：
flex-grow: 1;= 元素將以與視窗大小相同的比例增長
flex-shrink: 1;= 元素將按與視窗大小相同的比例縮小
flex-basis: 0; = 元素本身沒有起始值，將根據可用的螢屏尺寸占用螢屏，例如：- 如果包裝器中有 3 個 div，則每個 div 將占用 33%。
以上來源： https ://stackoverflow.com/a/37386525/14776809
然后，您可以申請max-width讓input規模盡可能高。我70px在這個例子中使用了，但如果你有一個更大的文本，你可以使用更高的值。
編輯
flexbox也適用于grid. 以下是如何確保兩個div-container 具有相同高度的示例：
/* For equal height - not necessary */
form {
display: grid;
grid-auto-rows: 1fr;
}
/* -------------------------------- */
div {
display: flex;
}
div>label {
flex: 1;
max-width: 70px;
}<form id="order" method="POST" action="/orderemail">
<div>
<label class="text-info" for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Email:</label>
<input style="text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="email" id="email" name="email" placeholder="Enter your email" required><br><br>
</div>
<div>
<label class="text-info" for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Token:</label>
<input style="text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="text" id="token" name="token" placeholder="Enter your token" required>
</div>
</form>uj5u.com熱心網友回復：
您可以使用該margin功能將其移動 4 個像素以使其對齊。
<form id = "order" method = "POST" action ="/orderemail">
<label class="text-info" for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Email:</label>
<input style="text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="email" id="email" name="email" placeholder="Enter your email" required><br><br>
<label class="text-info" for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Token:</label>
<input style="text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="text" id="token" name="token" placeholder="Enter your token" required>
</form>
<style>
#email{
margin-left: 4px;
}
</style>uj5u.com熱心網友回復：
您可以使用 margin-left 屬性（在文本框樣式上）從標簽中獲得相等的邊距
<form id = "order" method = "POST" action ="/orderemail">
<label class="text-info" for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Email:</label>
<input style="margin-left:8px;text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="email" id="email" name="email" placeholder="Enter your email" required><br><br>
<label class="text-info" for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Token:</label>
<input style="margin-left:4px;text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="text" id="token" name="token" placeholder="Enter your token" required>
</form>
看小提琴
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/477737.html