首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >HTML/CSS中的单选/复选框对齐

HTML/CSS中的单选/复选框对齐
EN

Stack Overflow用户
提问于 2008-12-28 17:40:07
回答 9查看 254.5K关注 0票数 79

将单选按钮/复选框与文本正确对齐的最简洁方法是什么?到目前为止,我使用的唯一可靠的解决方案是基于表的:

代码语言:javascript
复制
<table>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 1</td>
</tr>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 2</td>
</tr>
</table>

这可能会引起一些人的不满。我刚刚花了一些时间(再次)研究了一个无表的解决方案,但失败了。我尝试了浮点数、绝对/相对定位和类似方法的各种组合。不仅因为它们主要依赖于估计的单选按钮/复选框的高度,而且它们在不同的浏览器中的行为也不同。理想情况下,我希望找到一个不假设任何大小或特殊浏览器怪癖的解决方案。我可以使用表,但是我想知道哪里还有其他的解决方案。

EN

回答 9

Stack Overflow用户

发布于 2008-12-28 18:35:44

下面的代码可以在Firefox和Opera中运行(抱歉,我目前无法访问其他浏览器):

代码语言:javascript
复制
<div class="form-field">
    <input id="option1" type="radio" name="opt"/>
    <label for="option1">Option 1</label>
</div>

CSS:

代码语言:javascript
复制
.form-field * {
    vertical-align: middle;
}
票数 31
EN

Stack Overflow用户

发布于 2010-10-28 23:02:15

我发现最好也是最简单的方法就是这样做,因为你不需要添加标签,div或者其他任何东西。

input { vertical-align: middle; margin-top: -1px;}

票数 14
EN

Stack Overflow用户

发布于 2008-12-28 18:07:00

我根本不会用表格来做这个。CSS可以很容易地做到这一点。

我会这样做:

代码语言:javascript
复制
   <p class="clearfix">
      <input id="option1" type="radio" name="opt" />
      <label for="option1">Option 1</label>
   </p>

p { margin: 0px 0px 10px 0px; }
input { float: left; width: 50px; }
label { margin: 0px 0px 0px 10px; float: left; }

注意:我使用了http://www.positioniseverything.net/easyclearing.html中的clearfix类

代码语言:javascript
复制
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/396439

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档