你能在上面有4个带单选按钮和标签的行文本区域字段吗

Question

我是一个新手，正在构建一个表单来提出一系列问题。其想法是使用按钮进行手动选择，然后将文本键入框中。我要为最终用户显示的内容如下：

问题text区域标签收音机按钮(是/否(text区域

• 左侧粗体对齐的顶部问题
• 在下面的行中，将有4个标签(目前位于代码中文本区域的顶部(
• 在下面的行中，每个文本区域的上方都有一个单选按钮。回答问题时，选项为"是"one_answers"否">

我已经在内联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仅用于段落中的浮动图像。在2012年引入flexbox和css网格之前，这是一次出于造型目的的黑客攻击。它仍然是一个ahck，现在被错误地使用，因为它是不必要的。不幸的是，许多教程仍然在教授它，而不是使用flexbox和css-grid。这些是更强大、更好的造型方式，因为它们是正确的工具。

因此，作为第一步，删除float属性：.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; }以消耗所有剩余空间，从而使所有内容都完全对齐。

.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>