如何使textarea标签正确显示[重复]答案

【问题标题】：How to make the textarea label display correctly [duplicate]如何使textarea标签正确显示[重复]
【发布时间】：2018-11-22 11:16:37
【问题描述】：

我创建了一个响应式表单，当调整屏幕大小时它会变为两列。它主要按我想要的方式工作。

但是 textarea 的标签一直显示不正确。我希望它显示在新行上，但它一直显示在单选按钮区域。

单选按钮也有一个问题，可以同时选择两者。我一直试图找出我做错了什么，但我找不到解决方案。

Here is my code on jsfiddle.

/* CSS */

.myForm {
  padding: 40px 20px;
}

.myForm h2,
.myForm p {
  text-align: center;
  padding: 0 10px;
}

.myForm h2 {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
  font-family: sans-serif;
}

.myForm p {
  margin-bottom: 20px;
  font-size: 12px;
}

.myForm label {
  font-size: 14px;
}

form input {
  border: 1px solid #a9a9a9;
  border-radius: 3px;
  height: 25px;
  width: 96%;
  margin: 10px 0;
  font-size: 14px;
  padding: 5px;
}

.label,
.radio input[type="radio"] {
  display: inline;
  float: left;
  width: auto;
  margin: 10px 0;
  padding: 0 10px;
}

input[type="radio"],
input.radio {
  vertical-align: text-top;
  width: 13px;
  height: 13px;
  padding: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
  top: -8px;
  right: 5px;
}

.msg textarea {
  width: 96%;
  border: 1px solid #a9a9a9;
  border-radius: 3px;
  margin: 10px 0;
  font-size: 14px;
  padding: 5px;
}

form button {
  background-color: #a9a9a9;
  color: #fff;
  width: 100%;
  text-transform: uppercase;
  padding: 10px;
  border: none;
  border-radius: 3px;
}

@media only screen and (min-width: 768px) {
  /*Left form column*/
  .left {
    display: block;
    float: left;
    width: 48%;
  }
  /*Right form column*/
  .right {
    display: block;
    float: right;
    width: 48%;
  }
  .label,
  .radio input[type="radio"] {
    padding-right: 30px;
    padding-left: 30px;
  }
}

<!-- HTML -->
<form class="myForm">
  <h2>Lorem ipsum</h2>
  <p>text</p>
  <div class="fields">
    <label class="left">First Name
              <input type="text" name="other"></label>
    <label class="right">Last Name
              <input type="text" name="other"></label>
    <label class="left">text
              <input type="text" name="other"></label>
    <label class="right">text
              <input type="text" name="other"></label>
    <label class="left">text
              <input type="text" name="other"></label>
    <label class="right">text
              <input type="text" name="other"></label>
    <label class="left">text
              <input type="text" name="other"></label>
    <div class="radio right">
      <label>Some text</label><br>
      <label class="label">
                <input type="radio" name="phone" value="phone">Phone</label>
      <label class="label close">
                  <input type="radio" name="email" value="email">Email</label>
    </div>
    <div class="msg">
      <label>Message</label>
      <textarea rows="5"></textarea>
    </div>
  </div>
  <button type="button" name="button">Send</button>
</form>

【问题讨论】：

要选择一个单选按钮，您必须为其属性提供相同的name。
哦！当然，我怎么错过了，谢谢！
你更新的JSFiddle

标签： html css responsive

【解决方案1】：

这应该会有所帮助：

.msg{
  clear:both;
}

【讨论】：

成功了，谢谢！我无法相信那是多么容易，但我一直在挣扎。谢谢！
@daydreamer 你可能想学习如何使用像 flex 这样的东西而不是使用浮动 - 使用 css3，你不应该再滥用浮动进行布局
谢谢，我一定会这样做的。

【解决方案2】：

解决你描述的两个问题：

您的单选按钮需要具有相同的name 字段才能在同一组中。如果您为两者都设置了name="contact"，那么它们将不再可以同时选择。
您应该从 .radio input[type="radio"] 的 CSS 规则中删除 float: left;。这优先于 display: block; 的 .msg div 并导致它们显示在同一行上。

【讨论】：

谢谢！并感谢您对第二点的澄清。