javascript - 单选按钮漂浮在我不想要的地方

Question

我的第一个 HTML 文件非常困惑，所以我今天决定清理代码。

除了位于“DIV”标签内的单选按钮外，一切正常。这让我真的很生气，因为代码似乎没有任何问题。

HTML

<div class="sidebar border">    
    <div class="poll">
     <form> 
      <fieldset>

       <h3>Do you like peanuts ?</h3>

       <input type="radio">

       <label>yes</label>

       <input type="radio">

       <label>no</label>

      </fieldset>   
     </form>
    </div>      
</div>

CSS

#sidebar {      
        width: 13.1em; height: 34.6em;
        background-color: rgba(22, 43, 58, 0.9);
        float: left;
        margin-left: 0.6em;
        -webkit-border-radius: 10px;
        border-radius: 20px;
        border: 1px solid rgba(10, 25, 36, 0.5);
        position: absolute;
        box-shadow: 2px 2px 5px rgba(0,0,0, 0.4)}


.poll {     
        height: 18em;
        font-family: "Comic Sans MS", cursive, sans-serif;
        font-size: 0.7em;
        border-radius: 20px;
        margin-top: 1em;}


.poll h3 {  text-align:center;}


.poll fieldset{ 
        color: #e3f1ff; 
        width: 15em; height: 10em; 
        border-radius: 20px;
        display: block;
        margin-left: 0.9em;
        background-color: rgba(250, 250, 250, 0.1);
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(10, 25, 36, 0.7);}

.poll a     { color: white; }

.poll label, li { 
          display: block;
          padding: 5px;
          font-size: 0.9em;
          color: #e3f1fa;}

感谢您的宝贵时间!

ps。我知道绝对定位不适用于 float 。

Answer 1

尝试在标签上使用 display:inline-block 而不是 display:block。那么标签就在 radio 后面。之后，将每个输入及其标签与另一个元素(例如 div)包装起来。