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。我知道绝对定位不适用于浮动。

Answer 1

在标签上尝试T(n, k)而不是display:inline-block。那么标签就在收音机的后面。之后，将每个带有标签的输入用另一个元素（如div）包装。

Answer 2

将标签显示设为inline-block并使用<br>将第二个单选按钮发送到下一行。的 DEMO

<强> HTML

<div class="sidebar border"> <div class="poll"> <form> <fieldset> <h3>Do you like peanuts ?</h3> <input type="radio" name="likePeanuts"> <label>yes</label><br> <input type="radio" name="likePeanuts"> <label>no</label> </fieldset> </form> </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: inline-block; padding: 5px; font-size: 0.9em; color: #e3f1fa;}

还可以归功于 @Chris

不要忘记为收音机按钮设置名称

Answer 3

在你编写一些HTML或CSS代码之前（就像我一样）确保你的CSS文件中有这个代码！

* {
  margin: 0;
  padding: 0;
  border: 0; /* if you want */
  resize: none;
}

通过这种方式，您可以避免糟糕的浏览器失败或问题。

重要
UL，LI，BODY和DIV标签会有所不同。他们输了他们的默认保证金，填充。所以试一试，如果你对此不满意，你可以很容易地把它甩掉。

PS：如果你能提醒的话，避免使用花车。

Answer 4

我多次尝试使用您的代码来弄清楚您声称的错误但我没有得到它，但是按原样阅读您的代码，我告诉您我所做的更正：

<style>
#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;}
      </style>     
 <div class="sidebar border">

<div class="poll">
<form>  
<fieldset>
    <h3>Do you like peanuts ?</h3>
<input type="radio"/>yes<br/>
<input type="radio"/>no<br />
</fieldset> 
</form>
</div>      

</div>

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

4 个答案: