如何在两列中显示多个单选按钮答案

【问题标题】：How to show multiple radioButtons in two columns如何在两列中显示多个单选按钮
【发布时间】：2018-10-29 16:47:59
【问题描述】：

我在两列中动态显示单选按钮。正如你在图片中看到的

它在少数情况下看起来不错，但有时当文本很大时，它看起来不太好。我该如何解决这个问题

这里有一些代码：

.radiobox-padding-top{
    padding-top:15px;
}

input[type=radio] {
  float: left;
  display: block;
  margin-top: 4px;
}

label {
  margin-left: 15px;
  display: block;
}

这里是 html 代码（我使用的是 angular）

<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 remove-padding question-row-face">

  <div class="col-12" >
    <p class="grey-text inlineBlock question-padding">{{data.help_text}}</p>
  </div>

  <div class="row" style="margin: 0px">
    <div class="col-12 radiobox-padding-top">
      <div class="form-group">

        <span *ngFor="let entry of options; index as i">

          <div class="col-5 inlineBlock">
            <div class="radio">

              <input type="radio" name="{{data.slug}}" checked value="{{options[i]}}">
              <label>
                {{options[i]}}
              </label>
            </div>
          </div>

        </span>

      </div>
    </div>
  </div>
</div>

【问题讨论】：

问题不明白，什么意思？
如图所示，在第一部分，右侧与左侧不对齐。我需要修复它
你能显示你的无线电输入的 HTML，类在哪里，是否有包装器等？此处可能还有其他您未显示的 CSS 规则，而这些规则是此显示所必需的
我已经更新了我的问题@Kaddath，我正在使用另一个 CSS 文件，但它不包含任何与 radioButton 组件相关的内容
首先修复损坏的 HTML - 您不能在 span 中嵌套 div。然后，在我看来，您只是想指定vertical-align ...？

标签： html css radio-button

【解决方案1】：

我创建了一个running stackblitz。

像这样修改你的代码：

<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 remove-padding question-row-face">

  <div class="col-12" >
    <p class="grey-text inlineBlock question-padding">{{data.help_text}}</p>
  </div>

  <div class="row" style="margin: 0px">
    <div class="col-12 radiobox-padding-top">
      <div class="form-group">
        <div class="row">    
          <div class="col-6" *ngFor="let entry of options; index as i">    
            <div class="inlineBlock">
              <div class="radio">
                <input type="radio" name="{{data.slug}}" checked value="{{options[i]}}">
                <label>
                  {{options[i]}}
                </label>
              </div>
            </div>
          </div>    
        </div>
      </div>
    </div>
  </div>
</div>

另外更改您的 CSS，如下所示：

.radiobox-padding-top{
  padding-top:15px;
}

input[type=radio] {
  float: left;
  margin-top: 4px;
}

label {
  padding-left: 5px;
  margin-left: 15px;
  display: block;
}

有关引导断点的更多信息，请查看here。

【讨论】：

在大多数情况下看起来都不错，但是当我给一个选项提供长文本时，文本仍然会转移到新行。你可以在你创建的 stackblitz 中检查。
我的错。我更新了上面的 css 代码，以便与长选项文本一起正常工作。这应该可以解决您的问题。
天才！感谢您抽出宝贵时间并正确理解这个问题，因为大多数人只是因为他们无法解决这个问题而对这个问题投了反对票:)