时间戳

首页 > 解决方案 > CSS：Flex元素在包含输入时有额外的空间

html - CSS：Flex元素在包含输入时有额外的空间

问题描述

为什么当我设置为 have a of和to have a of.content时元素有一些额外的空间？当我删除. 输入占用了额外的空间，不再有这个问题。（我想限制输入的宽度，所以我在..input-fieldwidth20%inputwidth100%width: 20%.contentwidth:20%.input-field

问题

*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
}
.parent {
  display: flex;
  flex-direction: column;
}
.content:nth-child(1) {
  display: flex;
  align-self: flex-end;
}
input {
  width: 100%;
}
.input-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 20%;
  min-width: 10rem;
  max-width: 20rem;
}
label {
  margin-right: 0.5rem;
}
<div class="parent">
  <div class="content">
    <div class="input-field">
      <label>hey</label>
      <input type="text" />
    </div>
  </div>
  <div class="content"><p>hey</p></div>
  <div class="content"><p>you</p></div>
</div>

标签： htmlcss

解决方案

百分比是相对于父元素的。当你给它时20%，.input-field它会相对于父级.ie，.content所以它占据 20%，.content但它低于最小宽度，所以它会回落到min-width: 10rem最后留下一个空白空间，因为 even10rem更小超过 100% .content。如果您不想要额外的空间，您可以：

  • 设置width:min-content为.content它只会占用内容的固有最小宽度，这有点尴尬。
  • 设置width:100%并.input-field控制其 parent 的大小.content。

<style>
  .content {
    width: min-content;
  }
  *{
      margin:0;
      padding: 0;
      box-sizing: border-box;
  }
  .parent {
      display: flex;
      flex-direction: column;
  }
  .content:nth-child(1) {
      display: flex;
      align-self: flex-end;
  }
  input {
      width: 100%;
  }
  .input-field {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 20%;
      min-width: 10rem;
      max-width: 20rem;
  }
  label {
      margin-right: 0.5rem;
  }
</style>

<div class="parent">
  <div class="content">
      <div class="input-field">
          <label>hey</label>
          <input type="text">
      </div>
  </div>
  <div class="content"><p>hey</p></div>
  <div class="content"><p>you</p></div>
</div>

推荐阅读