你可以有 4 个行内文本区域字段，上面有一个单选按钮和标签吗？

Question

我有点菜鸟，建个表格问一系列问题。这个想法是使用按钮进行手动选择，然后将文本键入框中。我要寻找的最终用户的显示如下所示：

问题文本区域标签单选按钮（是/否）文本区域

顶部的问题以粗体左对齐
下面一行会有 4 个标签（目前位于代码中文本区域的顶部）
在此下方的一行中，每个文本区域上方都有一个单选按钮。选项将是 'yes' 和 'no' 以回答问题。

我在 4 个内联文本框和上面的标签方面取得了进展。我只需要向上移动标签，在文本区域上方添加一个样式为按钮的单选按钮（2 个选项 - 是/否）并扩展边框，这样所有这些都在里面。

在下方查看我的 HTML 和 CSS

.textAreaColumn{
width:100%;
}
.textAreaColumn div{
float:left;
width:25%;
border:1px solid grey;
padding:10px;
box-sizing: border-box;
}
.textAreaColumn div span{
display:block;
}
.textAreaColumn div textarea{
box-sizing: border-box;
width:100%;
border:1px solid grey;
min-height:150px;
}
.boxed {
  border: 1px solid grey ;
  padding:10px;
}

<div class="boxed">
<strong>Q1) Manager guidance when reviewing CSO feedback</strong>
</div>
<div class="textAreaColumn">
<div>
<span>Previous position</span>
<textarea placeholder="text"></textarea>
</div>
<div>
<span>Target set at last meeting</span>
<textarea placeholder="text"></textarea>
</div>
<div>
<span>Current position</span>
<textarea placeholder="text"></textarea>
</div>
<div>
<span>Target for next meeting</span>
<textarea placeholder="text"></textarea>
</div>
</div>

Answer 1

float仅适用于段落内的浮动图像。在引入 flexbox 和 css-grid 2012 之前，它是用于样式目的的 hack。它仍然是一个 ahck，现在被误用，因为它是不必要的。不幸的是，许多教程仍然继续教授它而不是使用 flexbox，并且 css-grid.Those 是更强大和更好的样式设置方法，因为它们是它的正确工具。

第一步，删除浮动属性：.textAreaColumn div { float: left; }。

然后添加：.textAreaColumn { display: flex; }。这会将 flexbos 添加到容器中，并且容器中的所有 div 将具有相同的高度并彼此相邻显示。

接下来添加：.textAreaColumn div { display: flex; flex-direction: column; }。这将使 div 的项目彼此对齐。

使用像这样的简单形式添加单选按钮：

<form>
  <input type="radio" id="form-a-yes" name="form-a">
  <label for="form-a-yes">Yes</label>
  <br>
  <input type="radio" id="form-a-no" name="form-a">
  <label for="form-a-no">No</label>
</form>

最后但并非最不重要的一点是：.textAreaColumn din span { flex-grow: 1; } 消耗所有剩余的 space 所以一切都完美对齐。

.textAreaColumn {
  width: 100%;
  display: flex;
}

.textAreaColumn div {
  display: flex;
  flex-direction: column;
  width: 25%;
  border: 1px solid grey;
  padding: 10px;
  box-sizing: border-box;
}

.textAreaColumn div span {
  display: block;
  flex-grow: 1;
}

.textAreaColumn div textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid grey;
  min-height: 150px;
}

.boxed {
  border: 1px solid grey;
  padding: 10px;
}

<div class="boxed">
  <strong>Q1) Manager guidance when reviewing CSO feedback</strong>
</div>
<div class="textAreaColumn">
  <div>
    <span>Previous position</span>
    <form>
      <input type="radio" id="form-a-yes" name="form-a">
      <label for="form-a-yes">Yes</label>
      <br>
      <input type="radio" id="form-a-no" name="form-a">
      <label for="form-a-no">No</label>
    </form>
    <textarea placeholder="text"></textarea>
  </div>
  <div>
    <span>Target set at last meeting</span>
    <form>
      <input type="radio" id="form-b-yes" name="form-b">
      <label for="form-b-yes">Yes</label>
      <br>
      <input type="radio" id="form-b-no" name="form-b">
      <label for="form-b-no">No</label>
    </form>
    <textarea placeholder="text"></textarea>
  </div>
  <div>    
    <span>Current position</span>  
      <form>
      <input type="radio" id="form-c-yes" name="form-c">
      <label for="form-c-yes">Yes</label>
      <br>
      <input type="radio" id="form-c-no" name="form-c">
      <label for="form-c-no">No</label>
    </form>
    <textarea placeholder="text"></textarea>
  </div>
  <div>
    <span>Target for next meeting</span> 
    <form>
      <input type="radio" id="form-d-yes" name="form-d">
      <label for="form-d-yes">Yes</label>
      <br>
      <input type="radio" id="form-d-no" name="form-d">
      <label for="form-d-no">No</label>
    </form>
    <textarea placeholder="text"></textarea>
  </div>
</div>

你可以有 4 个行内文本区域字段，上面有一个单选按钮和标签吗？

Can you have 4 in line text area fields with a radio button and label above?

html

css

forms

inline

radio-button