单选按钮内联并以标签为中心答案

【问题标题】：Radio Buttons Inline and Centered with Labels单选按钮内联并以标签为中心
【发布时间】：2011-06-29 09:04:37
【问题描述】：

我有以下表格：

        <form action="post.php" method="POST">
            <fieldset>
                 <div class="ratingClass">
                      <input type="radio" class="radio" name="rate" value="1" id="1"/>
                      <label for="1">1</label>
                      <input type="radio" class="radio" name="rate" value="2" id="2"/>
                      <label for="2">2</label>
                      <input type="radio" class="radio" name="rate" value="3" id="3"/>
                      <label for="3">3</label> 
                      <input type="radio" class="radio" name="rate" value="4" id="4"/>
                      <label for="4">4</label>
                      <input type="radio" class="radio" name="rate" value="5" id="5"/>
                      <label for="5">5</label>                                                                
                 </div>
            </fieldset>
            <input type="submit" value="Rate">
        </form>

由以下 CSS 设置样式：

fieldset { 
 overflow:hidden; 
}
.ratingClass { 
 float:left; 
 clear:none;
}
label { 
 float:left; 
 clear:none; 
 display:block; 
 padding: 2px 1em 0 0; 
}
input[type=radio], input.radio { 
 float:left;
 clear:none; 
 margin: 2px 0 0 2px; 
}

这一切都在另一个具有 text-align: center; 样式的 div 中。

我意识到这种行为是由于浮动，但如果我删除它们，那么单选按钮将不再显示内联。

我怎样才能让它们内联和居中？

【问题讨论】：

标签： css forms button inline radio

【解决方案1】：

尝试制作 .ratingClass 容器：

.ratingClass { 
 float:left; 
 clear:none;
 width: 100%;
 text-align: center; 
}

或

.ratingClass { 
 float:none;
 text-align: center; 
}

【讨论】：

【解决方案2】：

如果您可以处理ratingClass div 的固定宽度，您可以按以下方式进行操作……

.ratingClass { 
    width:300px; /* insert desired width here */
    margin:auto;
}

【讨论】：

这几乎可以工作，但单选按钮和标签仍然在 div 中向左浮动，看起来很不均匀。

【解决方案3】：

您不需要浮动所有内容，也不需要将标签设置为块元素。用这个替换你的 CSS 会导致所有内容都居中：

fieldset {
  overflow: hidden;
}
label {
  padding: 2px 1em 0 0;
}
input[type=radio], input.radio {
  margin: 2px 0 0 2px;
}

<div class="ratingClass"> 也是多余的，可以去掉。

【讨论】：