对齐materializecss单选按钮和文本区域

Question

这里是小提琴https://jsfiddle.net/be21z7wj/2/的链接

我正在尝试创建一个问题，该问题有一个带有“是”和“否”选项的单选按钮。除此之外，还应该有一个文本区域，用户可以在其中输入选择“否”的原因。正如您在小提琴中看到的那样，有我当前的代码有一些问题：

1. 是和否单选按钮重叠
2. 我希望单选按钮在两个列宽内，文本区域覆盖 8 个列宽。但这不起作用

       <div class="row">
          <div class="input-field col s2 m2 l2">
            <label>
            <input name="group1" id="radio_antibiotics_indicated_yes" type="radio" style ="vertical-align: center"/>
            <span style="padding-left:24px">Yes</span>
            </label>
            <label>
            <input name="group1" id="radio_antibiotics_indicated_no" type="radio"/>
            <span style="padding-left:24px">No</span>
            </label>
          </div>
          <div class="input-field col s8 m8 l8">
            <textarea id="text_antibiotics_indicated_no" class="materialize-textarea" style="margin:0px;padding:0px" required="" aria-required="true"></textarea>
            <label for="text_antibiotics_indicated_no">If ‘No’ response, write the reasons/comment</label>
          </div>
        </div>
      </div>

我该如何解决这些问题？

Answer 1

解决办法

1.是和否单选按钮重叠

最简单的解决方案就是用div 包装这部分代码（即下面的JSFiddle 中的<div id="wrapper">）。添加id 不是必需的，它只是为了您可以理解我在说什么。请参阅 JSFiddle sn-p here。

2。我想让单选按钮在两个列宽内，文本区域覆盖 8 个列宽，但这不起作用

我认为它正在工作，但问题是文本重叠行是因为没有足够的空间造成的。换句话说，文本太长了。如果您将<div class="input-field col s8 m8 l8"> 更改为<div class="input-field col s10 m10 l10">，此问题主要消失，但在某些特定的浏览器窗口宽度下问题仍然存在。

同样的事情也适用于“什么是可能的致病微生物？”。将<div class="input-field col s12 m6 l4"> 更改为<div class="input-field col s12 m12 l12">。请参阅 JSFiddle sn-p here。

如果这有帮助，请告诉我。