Question

当我点击单选按钮和下拉箭头时，它们将无法工作。我点击它们没有任何反应。我想有些东西是隐藏的，但我无法分辨。

有人可以帮助我吗？

以下是我项目的链接：https://codepen.io/Ozubergs/pen/VdKRmd?editors=1100

enter code here

Answer 1

之所以发生这种情况，是因为您的CSS定位技术。由于您通过相对定位推动一切，因此您可以使用覆盖下拉列表的元素以及单选按钮，这就是他们无法正常工作的原因。您的设计可以在没有相对定位的情况下实现。

Answer 2

您错误地使用了position: relative。这就是造成问题。我评论过了。并为标签添加vertical-align: top;并提交按钮。

＆＃13;

.header {
  margin: 2%;
}

#survey-form {
  background: #722f2d;
  margin: 0 auto;
  border-radius: 5px;
  width: 50%;
  padding: 10px;
}

.labels {
  display: inline-block;
  text-align: right;
  width: 40%;
  padding: 5px;
  margin-top: 10px;
  vertical-align: top;
}

.inputs {
  display: inline-block;
  text-align: left;
}

.fields {
  width: 210px;
  border-radius: 5px;
}

#submit {
    vertical-align: top;
}
/* .radio-buttons {
  position: relative;
  bottom: 55px;
  display: block;
}

.radio {
  position: relative;
  top: 70px;
  right: 30px;
  display: block;
}

.checkboxes{
  position: relative;
  bottom: 145px;
}

.checkbox{
  position: relative;
  top: 164px;
  right: 30px;
} 

.lbl {
  position: relative;
  bottom: 2px;
  left: 3px;
}

textarea {
  margin-top: 4%;
}

#submit {
  position: relative;
  bottom: 91px;
  margin: 10px;
}*/

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="header">
    <h1 class="text-center" id="title">Survey</h1>
    <p class="text-center" id="description">Let us know how to improve this survey</p>
  </div>
  <form id="survey-form">
    <div class="input-name">
      <div class="labels">
        <label for="name" id="name-label">* Name:</label>
      </div>
      <div class="inputs">
        <input type="text" placeholder="Enter full name" id="name" class="fields">
      </div>
    </div>
    <div class="input-email">
      <div class="labels">
        <label for="email" id="email-label">* Email:</label>
      </div>
      <div class="inputs">
        <input type="text" placeholder="Enter email" id="email" class="fields">
      </div>
    </div>
    <div class="input-age">
      <div class="labels">
        <label for="number" id="number-label">* Age:</label>
      </div>
      <div class="inputs">
        <input type="number" placeholder="Age" id="number" class="fields">
      </div>
    </div>
    <div class="labels">
      <label>What are you?</label>
    </div>
    <div class="inputs">
      <select id="dropdown">
        <option>Student</option>
        <option>Full time employee</option>
        <option>Part time employee</option>
        <option>Self-learner</option>
        <option>Prefer not to say</option>
        <option>Other</option>
      </select>
    </div>
    <div class="radio-buttons">
      <div class="labels">
        <label>Do you like this survey?</label>
      </div>
      <div class="inputs">
        <ul style="list-style:none">
          <li class="radio"><input type="radio" id="male" value="1"><label for="male" class="lbl">Yes</label></li>
          <li class="radio"><input type="radio" id="female" value="2"><label for="female" class="lbl">No</label></li>
          <li class="radio"><input type="radio" id="other" value="3"><label for="other" class="lbl">Meh</label></li>
        </ul>
      </div>
    </div>
    <div class="checkboxes">
      <div class="labels">
        <label>How should I improve?</label>
      </div>
      <div class="inputs">
        <ul style="list-style:none">
          <li class="checkbox"><input type="checkbox" value="1" id="add"><label for="add" class="lbl">Add more detail</label></li>
          <li class="checkbox"><input type="checkbox" value="2" id="clean"><label for="clean" class="lbl">Clean it up</label></li>
          <li class="checkbox"><input type="checkbox" value="3" id="design"><label for="design" class="lbl">Design it better</label></li>
          <li class="checkbox"><input type="checkbox" value="4" id="create"><label for="create" class="lbl">Someone else should create the survey</label></li>
          <li class="checkbox"><input type="checkbox" value="5" id="confidence"><label for="confidence" class="lbl">Have confidence</label></li>
          <li class="checkbox"><input type="checkbox" value="6" id="more"><label for="more" class="lbl">Add more buttons</label></li>
        </ul>
      </div>
    </div>
    <div class="text-box text-center">
      <textarea rows="4" cols="30" placeholder="Enter your comments here..."></textarea>
      <button type="button" id="submit">Submit</button>
    </div>
  </form>
</div>

＆＃13;

无法选择下拉菜单和单选按钮

2 个答案: