将文本字段定位为 'attached' 到另一个字段

Question

我有以下布局：

当屏幕尺寸改变时，我希望文本字段始终保持 'attached' 到最后一个单选按钮，它们之间的距离为 1em。问题是单选按钮组是一个 div 而文本字段是另一个。有没有办法在文本字段 only 上指定 css 规则来实现这样的定位？如果没有，可以做些什么？我正在使用 semantic-ui-react，由于项目结构的性质，只能将单选按钮组和文本字段定位在两个不同的 Form.Groups'。

Answer 1

您可以为这个设计使用显示 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;
}

将文本字段定位为 'attached' 到另一个字段

Position textfield as 'attached' to the other field

html

css

semantic-ui-react