HTML/CSS中的单选/复选框对齐
HTML/CSS中的单选/复选框对齐
提问于 2008-12-28 17:40:07
将单选按钮/复选框与文本正确对齐的最简洁方法是什么？到目前为止，我使用的唯一可靠的解决方案是基于表的：
<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>这可能会引起一些人的不满。我刚刚花了一些时间(再次)研究了一个无表的解决方案，但失败了。我尝试了浮点数、绝对/相对定位和类似方法的各种组合。不仅因为它们主要依赖于估计的单选按钮/复选框的高度，而且它们在不同的浏览器中的行为也不同。理想情况下，我希望找到一个不假设任何大小或特殊浏览器怪癖的解决方案。我可以使用表，但是我想知道哪里还有其他的解决方案。
Stack Overflow用户
发布于 2013-01-06 15:21:34
下面我将动态插入一个复选框。包括样式是为了对齐复选框，最重要的是确保自动换行是整齐的。这里最重要的是display:表格单元格；用于对齐
visual basic代码。
动态插入复选框的代码
Dim tbl As Table = New Table()
Dim tc1 As TableCell = New TableCell()
tc1.CssClass = "tdCheckTablecell"
'get the data for this checkbox
Dim ds As DataSet
Dim Company As ina.VullenCheckbox
Company = New ina.VullenCheckbox
Company.IDVeldenperScherm = HETid
Company.IDLoginBedrijf = HttpContext.Current.Session("welkbedrijf")
ds = Company.GetsDataVullenCheckbox("K_GetS_VullenCheckboxMasterDDLOmschrijvingVC") 'ds6‘创建复选框
Dim radio As CheckBoxList = New CheckBoxList
radio.DataSource = ds
radio.ID = HETid
radio.CssClass = "tdCheck"
radio.DataTextField = "OmschrijvingVC"
radio.DataValueField = "IDVullenCheckbox"
radio.Attributes.Add("onclick", "documentChanged();")
radio.DataBind()‘连接复选框
tc1.Controls.Add(radio)
tr.Cells.Add(tc1)
tbl.Rows.Add(tr)checkbox的样式为
input[type="checkbox"] {float: left; width: 5%; height:20px; border: 1px solid black; }
.tdCheck label { width: 90%;display: table-cell; align:right;}
.tdCheck {width:100%;}和超文本标记语言输出
<head id="HEAD1">
<title>
name
</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR" /><meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE" />
</head>
<style type='text/css'>
input[type="checkbox"] {float: left; width: 20px; height:20px; }
.tdCheck label { width: 90%;display: table-cell; align:right;}
.tdCheck {width:100%;}
.tdLabel {width:100px;}
.tdCheckTableCell {width:400px;}
TABLE
{
vertical-align:top;
border:1;border-style:solid;margin:0;padding:0;border-spacing:0;
border-color:red;
}
TD
{
vertical-align:top; /*labels ed en de items in het datagrid*/
border: 1; border-style:solid;
border-color:green;
font-size:30px }
</style>
<body id="bodyInternet" >
<form name="Form2" method="post" action="main.aspx?B" id="Form2">
<table border="0">
<tr>
<td class="tdLabel">
<span id="ctl16_ID{A}" class="DynamicLabel">
TITLE
</span>
</td>
<td class="tdCheckTablecell">
<table id="ctl16_{A}" class="tdCheck" onclick="documentChanged();" border="0">
<tr>
<td>
<input id="ctl16_{A}_0" type="checkbox" name="ctl16${A}$0" />
<label for="ctl16_{A}_0">
this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp
</label>
</td>
</tr>
<tr>
<td>
<input id="ctl16_{A}_1" type="checkbox" name="ctl16${A}$1" />
<label for="ctl16_{A}_1">
ITEM2
</label>
</td>
</tr>
<tr>
<td>
<input id="ctl16_{A}_2" type="checkbox" name="ctl16${A}$2" />
<label for="ctl16_{A}_2">
ITEM3
</label>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/396439
复制相关文章
相似问题
腾讯云开发者
