将文本字段定位为“附加”到另一个字段

Question

我的布局如下：

更改屏幕大小后，我希望文本字段始终保持“附加”到最后一个单选按钮，它们之间的距离为List<String>。问题在于单选按钮组是一个1em，而文本字段是另一个。是否可以在文本字段div中指定css规则来实现这种定位？如果没有，该怎么办？我正在使用only，由于项目结构的性质，只能将单选按钮组和文本字段放置在两个不同的semantic-ui-react s'中。

Answer 1

您可以将display flex属性用于此设计。它将始终与最后一个单选按钮的底部对齐。您只需要添加到CSS中的行即可。这是笔：https://codepen.io/Mak0619/pen/bPYXyg

HTML：

<div class="radio-button-grop">
  <div class="bd-example">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked="">
      <label class="form-check-label" for="exampleRadios1">
      Default radio
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
      <label class="form-check-label" for="exampleRadios2">
      Second default radio
      </label>
    </div>
    <div class="form-check disabled">
      <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled="">
      <label class="form-check-label" for="exampleRadios3">
      Disabled radio
      </label>
    </div>
  </div>
  <div class="text-field">
    <input type="text"> 
  </div>
</div>

CSS：

.radio-button-grop{
  display: flex;
  align-items: flex-end;
}
.text-field{
  margin-left: 1em;
}