单选按钮被隐藏在下拉菜单下?

时间:2018-06-14 03:34:53

标签: html bootstrap-4

我的占位符文字2和占位符文字4个电台选项位于下拉菜单的后面。我尝试过添加换行符,我在网上查看了一些示例,但我还没有看到我的代码和他们的代码之间有什么不同,如果这是一个简单的解决方案,我道歉,我是一个初学者。我想看看我是否可以在不使用css的情况下解决这个问题。

https://codepen.io/thehiddencheese/pen/qKjgYQ

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<body>

  <h1 id="title">Survey Form</h1>
  <div class="jumbotron">
    <h2 id="description">Whats your favorite blank?</h2>
    <form id="survey-form" action="" method="get">
      <div>
        <p>* Name:
          <input type="text" name="Enter your name" />
        </p>
      </div>
      <div>
        <p>
          * Email:
          <input type="text" name="Enter your email" />
        </p>
      </div>
      <div>
        <p>
          * Age:
          <input type="text" name="Enter your age" />
        </p>
      </div>
      <div>
        <p>
          *  Placeholder text1?
          <select name="Daily Driver">
          <option value="Daily Driver">1</option>
          <option value="Project Car">2</option>
          <option value="Both">3</option>
        </p>
      </div>
      <div>
        <p>
          * Placeholder text2:
          <label>
            <input type="radio" name="placeholder" value="1" checked="checked" /> 
              1
          </label>
          <label>
            <input type="radio" name="placeholder" value="2" /> 
              2
          </label>
          <label>
            <input type="radio" name="placeholder" value="3" /> 
              3
          </label>
        </p>
      </div>
      <div>
        <p>
          * Placeholder text3:
          <select name="text3">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </p>
      </div>
      <div>
        <p>
          * Placeholder text4:
          <input type="checkbox" name="text4" value="1" checked="checked" />
            1
          <input type="checkbox" name="text4" value="1" />
            2
          <input type="checkbox" name="text4" value="1" />
            3
        </p>
      </div>
      <div>
        <p>Any comments or Suggestions?</p>
        <textarea name="comments" cols="55" rows="3">Enter your comments...</textarea>
      </div>
    </form>
  </div>

</body>

1 个答案:

答案 0 :(得分:0)

我弄清楚我做错了什么

我忘记了关闭选择标记

所以现在我的代码看起来像这样

  <div id="amountofcars">
    <p class="center">
      <label>
        * How many cars do you own?
      </label>
      <select name="amountofcars">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5+">5+</option>
      </select>
    </p>
  </div>