Question

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

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

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

/* 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"，则它们将不再可同时选择。
您应该从float: left;的CSS规则中删除.radio input[type="radio"]。这优先于display: block; .msg的{{1}}，并导致它们显示在同一行上。

如何使文本区域标签正确显示

2 个答案: