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

Question

这里是link到fiddlehttps://jsfiddle.net/be21z7wj/2/

我正在尝试创建一个问题，其中有一个带有选项是和否的单选按钮。除此之外，应该有一个文本区域，用户可以在其中输入选择否的原因。正如您在 fiddle，我目前的代码有几个问题：

是和否单选按钮重叠
我希望单选按钮在两个列宽内，文本区域覆盖 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 片段 here.

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

我认为它可以工作，但问题是文本重叠是因为没有足够的space。换句话说，文本太长了。如果将 <div class="input-field col s8 m8 l8"> 更改为 <div class="input-field col s10 m10 l10">，此问题基本上会消失，但在某些特定的浏览器 window 宽度下，问题仍然存在。

同样的事情也适用于 “可能的原因是什么 Micro-organisms？”。将 <div class="input-field col s12 m6 l4"> 更改为 <div class="input-field col s12 m12 l12">。请参阅 JSFiddle 片段 here.

如果有帮助请告诉我。

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

Aligning materializecss Radio buttons and Text area

html

css

radio-button

materialize

解决方案

1。是和否单选按钮重叠

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