html - 3 <label> 标签共享同一个规则但显示不同

Question

首先，让我们看看我的屏幕截图。它非常详细地表达了我的问题: Demonstration

这是我的代码的一小部分:

.contain {
	align-items: center;
	display: flex;
	justify-content: space-around;
	min-width: 450px;
	padding: 0 50pt 10pt 50pt
}

.contain.layout-col {
	flex-direction: column
}

.item.field {
	border-bottom: 2px solid #E0E0E0;
	display: flex;
	justify-content: center;
	margin-bottom: 6pt;
	max-width: 650px;
	min-width: 300px
}

.item.field > label {
	display: block;
	font-weight: bold;
	padding: 10pt 5pt 6pt 5pt;
	width: 50px
}

.item.field > input {
	padding: 10pt 16pt 6pt 16pt;
	transition: all 0.21s ease-in-out;
	width: 100%
}

.item.field > input:focus {
	border-bottom: 2px solid #F06292;
	font-size: 1em;
	margin-bottom: -2px
}

<div class='contain layout-col'>
  <div class='item field'>
    <label for='name' id='name-label'>Name</label>
    <input placeholder='What&#39;s your name?' id='name' type='text' name='name' required/>
  </div>
  <div class='item field'>
    <label for='email' id='email-label'>Email</label>
    <input placeholder='Do you have email?' id='email' type='email' name='email' required/>
  </div>
  <div class='item field'>
    <label for='number' id='number-label'>Age</label>
    <input placeholder='How old are you?' id='number' type='number' min='7' max='69' name='age' required/>
  </div>
</div>

如您所见，3 个标签使用一个规则 .item.field > label。并且都将width定义为50px并且label标签已经设置为 block 元素。此时，预计宽度为50px，标签的3个应该相等。这就是想法，但只有前 2 个标签遵循规则。最后一个 #number-label 没有这样做。它丢失了几个像素!

我真的不知道怎么会这样。希望大佬赐教。 (我有其他解决方案是使用 float 属性，但这个错误让我很烦恼，所以我非常想了解它。)

我的代码是在 CodePen.io 上编写的，并在 Chrome-69 和 Firefox-62 上运行测试。结果是一样的。

Answer 1

width 在应用于 flex 元素时的工作方式并不完全相同，尤其是当您将 input 设置为 100% 宽度时。

对于固定宽度，请改用 flex: 0 0 50px。

.contain {
	align-items: center;
	display: flex;
	justify-content: space-around;
	min-width: 450px;
	padding: 0 50pt 10pt 50pt
}

.contain.layout-col {
	flex-direction: column
}

.item.field {
	border-bottom: 2px solid #E0E0E0;
	display: flex;
	justify-content: center;
	margin-bottom: 6pt;
	max-width: 650px;
	min-width: 300px
}

.item.field > label {
	display: block;
	font-weight: bold;
	padding: 10pt 5pt 6pt 5pt;
	flex: 0 0 50px
}

.item.field > input {
	padding: 10pt 16pt 6pt 16pt;
	transition: all 0.21s ease-in-out;
	/*width: 100% */
        /*try*/
        flex:1;
}

.item.field > input:focus {
	border-bottom: 2px solid #F06292;
	font-size: 1em;
	margin-bottom: -2px
}

<div class='contain layout-col'>
  <div class='item field'>
    <label for='name' id='name-label'>Name</label>
    <input placeholder='What&#39;s your name?' id='name' type='text' name='name' required/>
  </div>
  <div class='item field'>
    <label for='email' id='email-label'>Email</label>
    <input placeholder='Do you have email?' id='email' type='email' name='email' required/>
  </div>
  <div class='item field'>
    <label for='number' id='number-label'>Age</label>
    <input placeholder='How old are you?' id='number' type='number' min='7' max='69' name='age' required/>
  </div>
</div>