CSS - 使元素本身变短

Question

所以基本上我制作了一个父元素宽度 90% 的输入元素。 我在输入元素之后创建了一个 span 标签。所以我希望根据 span 标签的内容，输入元素应该调整大小并自行变短。 但我这样做有问题......

这是html代码：

<div class="input-field">
                    <p> Full Name </p>
                    <input type="text" placeholder="Enter your full name">
                    <span>Must be your full name</span>
</div>

这是CSS代码：（在代码中我没有输入我尝试过的方法，它们位于代码下方）

.input-field input{
    width: 450px;
    max-width: 90%;
    height: 30px;
}

我尝试过自动、调整大小等，但没有任何效果。

.input-field input{
    width: 450px auto;
    max-width: 90%;
    height: 30px;
}

使用 auto 只是让它原来变小了

.input-field input{
    width: 450px;
    resize: auto;
    max-width: 90%;
    height: 30px;
}

我也尝试过调整大小，但没有任何作用..我也尝试过

resize: horizontally;

所以我需要帮助..

Answer 1

将

input

和

span

包裹在弹性盒子容器中，并阻止

span

包裹。

.input-field input {
  height: 30px;
}

.input-field {
  background: lightblue;
}

.wrap {
  display: flex;
  align-items: center;
}

.wrap input {
  flex: 1 1 450px;
  max-width: 90%;
  min-width: 0;
}

.wrap span {
  white-space: nowrap;
}

<div class="input-field">
  <p> Full Name </p>
  <div class="wrap">
    <input type="text" placeholder="Enter your full name">
    <span>Must be your full name</span>
  </div>
</div>

<div class="input-field">
  <p> Full Name </p>
  <div class="wrap">
    <input type="text" placeholder="Enter your full name">
    <span>Must be your really long full name</span>
  </div>
</div>