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，并且标签标记已设置为block元素。目前，宽度预期为50像素，且3个标记应彼此相等。就是这个主意，但是只有两个第一个标签遵循规则。最后一个#number-label不这样做。它损失了几个像素！

我真的不知道为什么会这样。我希望你们能启发我。（我还有其他解决方案正在使用float属性，但是此错误使我烦恼，所以我非常想了解它。）

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

Answer 1

width应用于弹性项目时的工作方式不太相同，尤其是当您告诉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>

3个<label>标签共享一个规则，但显示方式不同

1 个答案: