将图标对齐到输入字段的右侧，无论宽度如何

Question

我有三个输入字段，每个字段都有固定的宽度，我想要一个与每个字段右侧对齐的图标。

现在，它似乎与父容器的右侧对齐。

看看这个 codepen 明白我的意思。

.input-container {
  width: fit-content;
  position: relative;
  margin-top: 16px;
}

.input-field {
  padding: 8px 12px;
  border: 1px solid gray;
  position: relative;
}

.input-field.short {
  width: 100px;
}

.input-field.medium {
  width: 200px;
}

.input-field.long {
  width: 400px;
}

.icon {
  position: absolute;
  right: 8px;
  top: 8px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">

<div class="input-container">
  <input class="input-field short" type="text">
  <i class="fa fa-user icon"></i>
  <div>
    <div class="input-container">
      <input class="input-field medium" type="text">
      <i class="fa fa-user icon"></i>
      <div>
        <div class="input-container">
          <input class="input-field long" type="text">
          <i class="fa fa-user icon"></i>

Answer 1

您没有关闭您正在使用的 div 标签。开盘 <div> 应由其闭盘对应 </div> 平盘。您的代码有效，只是您忘记为每个 div 使用结束标记。请参阅下面的代码片段以了解我的意思。

.input-container {
  width: fit-content;
  position: relative;
  margin-top: 16px;
}

.input-field {
  padding: 8px 12px;
  border: 1px solid gray;
  position: relative;
}

.input-field.short {
  width: 100px;
}

.input-field.medium {
  width: 200px;
}

.input-field.long {
  width: 400px;
}

.icon {
  position: absolute;
  right: 8px;
  top: 8px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">

<div class="input-container">
  <input class="input-field short" type="text">
  <i class="fa fa-user icon"></i>
</div>
<div class="input-container">
  <input class="input-field medium" type="text">
  <i class="fa fa-user icon"></i>
</div>
<div class="input-container">
  <input class="input-field long" type="text">
  <i class="fa fa-user icon"></i>
</div>

我也更正了您的 codepen 代码 here。

将图标对齐到输入字段的右侧，无论宽度如何

Align Icon to The Right of an Input Field No Matter Width

html

css

input-field