您能否在行文本区域中有4个带有单选按钮和上方标签的字段? [英] Can you have 4 in line text area fields with a radio button and label above?

问题描述

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

I am a bit of a rookie and building a form to ask a series of questions. The idea is that a manual selection is made using a button and then text typed into a box. The display for the end user I am going for would look like the following:

问题TEXTAREA标签无线电按钮(是/否)TEXTAREA

QUESTION TEXTAREA LABEL RADIO BUTTON (yes/ no) TEXTAREA

• 顶部的问题以粗体左对齐
• 在下面的行上将有4个标签(当前位于代码中的文本区域的顶部)
• 在此文本行下方的每个文本区域上方都将具有一个单选按钮.回答该问题，选项为是"和否".

我在内联4个文本框和上面的标签方面取得了进步.我只需要向上移动标签，在文本区域上方添加一个设置为按钮样式的单选按钮(2个选项-是/否)，然后扩展边框，使所有这些内容都在里面.

I have made progress with 4 text area boxes inline and a label above. I just need to move the labels up, add a radio styled as a button (2 options - yes/ no) above the text area and expand the border so all this comes inside.

在下面查看我的HTML和CSS

See my HTML and CSS so far below

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

推荐答案

float 仅用于段落中的浮动图像.在引入flexbox和css-grid 2012之前，这是一种用于样式设计的技巧.它仍然是一个错误，现在由于不必要而被误用了.不幸的是，许多教程仍然继续讲授它，而不是使用flexbox和css-grid.它们是更强大，更好的样式设计方式，因为它们是正确的工具.

floatis for floating images within a paragraph only. Befor the introduction of flexbox and css-grid 2012 it was a hack for styling purpose. It remains a ahck which now is mis-used as it is unecessary. Unfortunatly many tutorials still keep teaching it instead of the use of flexbox and css-grid.Those are the more powerful and far better ways of styling as they are the right tools for it.

因此，第一步，删除float属性: .textAreaColumn div {float:left;} .

So as first step, delete the float property: .textAreaColumn div { float: left; }.

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

Then add: .textAreaColumn { display: flex; }. This will add flexbos to the container and all the divs within the container will have the same height and be displayed next to each other.

接下来添加: .textAreaColumn div {display:flex;flex-direction:列;} .这样会将div的各项彼此对齐.

Next add: .textAreaColumn div { display: flex; flex-direction: column; }. this will align the items of the divs below each other.

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

Add radiobuttons with the use of a simple form like this:

<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;} 来消耗所有剩余空间，以便所有内容都完全对齐.

Last but not least add: .textAreaColumn din span { flex-grow: 1; } to consume all remaining space so everything is perfectly aligned.

.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个带有单选按钮和上方标签的字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！