单选按钮和标签显示在同一行

问题描述 投票：0回答：15

为什么我的标签和单选按钮不会保持在同一行，我该怎么办？

这是我的表格：

<form name="submit" id="submit" action="#" method="post">
    <?php echo form_hidden('what', 'item-'.$identifier);?>

    <label for="one">First Item</label>
    <input type="radio" id="one" name="first_item" value="1" />

    <label for="two">Second Item</label>
    <input type="radio" id="two" name="first_item" value="2" />
    <input class="submit_form" name="submit" type="submit" value="Choose" tabindex="4" />
</form>
html css
15个回答
108
投票

如果您使用我在这个问题中列出的 HTML 结构，您只需将标签和输入浮动到左侧并调整填充/边距，直到内容对齐。

是的，您需要让您的单选按钮具有旧 IE 的类名称。并且要让所有

全部位于同一行，根据我上面链接到的标记，它会像这样：

fieldset { overflow: hidden } .some-class { float: left; clear: none; } label { float: left; clear: none; display: block; padding: 0px 1em 0px 8px; } input[type=radio], input.radio { float: left; clear: none; margin: 2px 0 0 2px; }
<fieldset>
      <div class="some-class">
        <input type="radio" class="radio" name="x" value="y" id="y" />
        <label for="y">Thing 1</label>
        <input type="radio" class="radio" name="x" value="z" id="z" />
        <label for="z">Thing 2</label>
      </div>
    </fieldset>





    



    

    
    
    

    

        

            

                

                    
76
投票

                    
                

            

        

        
我一直做的只是将单选按钮包裹在标签内......



<label for="one">
<input type="radio" id="one" name="first_item" value="1" />
First Item
</label>



类似的事情，一直对我有用。

    



    

    
    
    

    

        

            

                

                    
11
投票

                    
                

            

        

        
您可能在 
css 中的某处为您的 input 标签指定了 width。


将 
class="radio"
 添加到您的单选框，并将 
input.radio {width: auto;}
 添加到您的 css。

    



    

    
    
    

    

        

            

                

                    
9
投票

                    
                

            

        

        
我总是避免使用 
float:left
 但我使用 
display: inline







.wrapper-class input[type="radio"] {
  width: 15px;
}

.wrapper-class label {
  display: inline;
  margin-left: 5px;
  }
<div class="wrapper-class">
  <input type="radio" id="radio1">
  <label for="radio1">Test Radio</label>
</div>





    



    

    
    
    

    

        

            

                

                    
7
投票

                    
                

            

        

        
将它们都放在
display:inline
。

    



    

    
    
    

    

        

            

                

                    
5
投票

                    
                

            

        

        
嗯。默认情况下，
<label>
是
display: inline;
，
<input>
（至少大致）是
display: inline-block;
，所以它们应该在同一行。请参阅
http://jsfiddle.net/BJU4f/


也许样式表正在将 
label
 或 
input
 设置为 
display: block
？

    



    

    
    
    

    

        

            

                

                    
4
投票

                    
                

            

        

        
我假设问题是当窗口太窄时它们会换行到单独的行上。  正如其他人指出的那样，默认情况下标签和输入应该是“display:inline;”，因此除非您有其他样式规则正在更改此设置，否则如果有空间，它们应该呈现在同一行上。



如果不更改标记，则无法仅使用 CSS 来解决此问题。



修复此问题的最简单方法是将单选按钮和标签包装在块元素中，例如 
p
 或 
div
，然后使用 
white-space:nowrap
 防止其包装。  例如：



<div style="white-space:nowrap;">
  <label for="one">First Item</label>
  <input type="radio" id="one" name="first_item" value="1" />
</div>

    



    

    
    
    

    

        

            

                

                    
2
投票

                    
                

            

        

        
**
使用表格将收音机和文本对齐为一行




  









<div >
  <table>
    <tbody>
      <tr>
        <td><strong>Do you want to add new server ?</strong></td>
        <td><input type="radio" name="addServer" id="serverYes" value="1"></td>
        <td>Yes</td>
        <td><input type="radio" name="addServer" id="serverNo" value="1"></td>
        <td>No</td>

      </tr>
    </tbody>
  </table>
</div>







**

    



    

    
    
    

    

        

            

                

                    
1
投票

                    
                

            

        

        
我无法使用该代码在 Google Chrome 4.0、IE8 或 Firefox 3.5 中重现您的问题。标签和单选按钮保持在同一行。



尝试将它们都放在 
<p>
 标签内，或将单选按钮设置为内联，就像精英绅士建议的那样。

    



    

    
    
    

    

        

            

                

                    
1
投票

                    
                

            

        

        
我使用这个代码并且工作得很好：



input[type="checkbox"], 
input[type="radio"],
input.radio,
input.checkbox {
    vertical-align:text-top;
    width:13px;
    height:13px;
    padding:0;
    margin:0;
    position:relative;
    overflow:hidden;
    top:2px;
}



您可能需要重新调整最高值（取决于您的
line-height
）。如果您不希望兼容 IE6，您只需将此代码放入您的页面即可。否则，您必须在输入中添加额外的类（您可以使用 jQuery - 或任何其他库 - 为此；））

    



    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        
我在同一主题的不同帖子中的回答应该可以帮助您
多复选框的 zend 表单从标签中删除输入
    



    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        
注意：传统上，label 标签用于菜单。例如：



<menu>
<label>Option 1</label>
<input type="radio" id="opt1">

<label>Option 2</label>
<input type="radio" id="opt2">

<label>Option 3</label>
<input type="radio" id="opt3">  
</menu>

    



    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        
我遇到了类似的问题，将所有单选按钮保持在同一行。在尝试了所有我能做的事情之后，除了以下之外，没有什么对我有用。我的意思是简单地使用表格解决了允许单选按钮出现在同一行中的问题。



<table>
<tr>
    <td>
        <label>
            @Html.RadioButton("p_sortForPatch", "byName", new { @checked = "checked", @class = "radio" }) By Name
        </label>
    </td>
    <td>
        <label>
            @Html.RadioButton("p_sortForPatch", "byDate", new { @class = "radio" }) By Date
        </label>
    </td>
</tr>
</table>

    



    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        
如果问题是窗口太窄时标签和输入换行成两行，请删除它们之间的空格；例如：



<label for="one">First Item</label>
<input type="radio" id="one" name="first_item" value="1" />



如果元素之间需要空格，请使用不间断空格 (
&amp;
 
nbsp;
) 或 CSS。

    



    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        
fieldset {
  overflow: hidden
}

.class {
  float: left;
  clear: none;
}

label {
  float: left;
  clear: both;
  display:initial;
}

input[type=radio],input.radio {
  float: left;
  clear: both;     
}

    

	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.