如何让textarea标签正确显示

Question

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

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

单选按钮也存在问题，可以同时选择这两个按钮。我一直在努力找出我做错了什么，但我找不到解决办法。

/* 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>

Answer 1

这应该有帮助：

.msg{
  clear:both;
}

Answer 2

解决您描述的两个问题：

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

如何让textarea标签正确显示

How to make the textarea label display correctly

html

css

responsive