如何用CSS使它们对齐 - Dreamweaver及网页制作 - 5D艺术网，我的艺术网！

» 互动论坛 » Dreamweaver及网页制作 » 如何用CSS使它们对齐

跳转到：

每页显示15条 1/1 << <1 >>

	主题: 如何用CSS使它们对齐
indian 职务：普通成员等级：1 金币：4.0 发贴：75 注册：2003/8/31 10:24:44	引用 #12004/12/17 20:51:38 图片如下：图1 图片如下：图2 如图，如何用XHTML+CSS2.0使这些复选框每4个一组对齐，即基于复选框对齐（就像图2中哪样对齐，图2用的是表格）？请指点，谢谢！我的博客：http://blog.kysf.net
不是高手职务：普通成员等级：3 金币：5.0 发贴：1352 注册：2002/8/23 2:27:18	引用 #22004/12/18 8:10:13 每个单元都写在一个块对象里，写个样式让文本流向对象的右边，并统一宽度 .demo{float:left;width:150px} <style> .demo{float:left;width:100px;} </style> <div style="width:400px"> <div class="demo"><input type="checkbox" /> 钩钩</div> <div class="demo"><input type="checkbox" /> 钩钩</div> <div class="demo"><input type="checkbox" /> 钩钩</div> <div class="demo"><input type="checkbox" /> 钩钩</div> <div class="demo"><input type="checkbox" /> 钩钩</div> <div class="demo"><input type="checkbox" /> 钩钩</div> <div class="demo"><input type="checkbox" /> 钩钩</div> <div class="demo"><input type="checkbox" /> 钩钩</div> </div> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
indian 职务：普通成员等级：1 金币：4.0 发贴：75 注册：2003/8/31 10:24:44	引用 #32004/12/18 9:46:44 图1 图2 如图，如何用XHTML+CSS2.0使这些复选框每4个一组对齐，即基于复选框对齐（就像图2中哪样对齐，图2用的是表格）？这里有3种思路，分别如下：思路一： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> UL { BORDER-TOP-WIDTH: 0px; CLEAR: left; PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; TEXT-ALIGN: center; BORDER-RIGHT-WIDTH: 0px;height:100px } LI { PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #fff 1px solid; LINE-HEIGHT: 27px; PADDING-TOP: 0px; TEXT-ALIGN:left;width:100px; } </style> </head> <body><ul> <li><input name="" type="checkbox" value="" />.com</li><li><input name="" type="checkbox" value="" />.net</li> <li><input name="" type="checkbox" value="" />.com.cn</li> <li><input name="" type="checkbox" value="" />.net.cn</li> </ul><ul> <li><input name="" type="checkbox" value="" />.org.cn</li> <li><input name="" type="checkbox" value="" />.gov.cn</li> <li><input name="" type="checkbox" value="" />.cn</li> <li><input name="" type="checkbox" value="" />.biz</li> </ul> </body> </html> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] 用li标签实现，每4个一组，分两组，然后定义li的CSS。思路二： <html> <body> <style> label{width:100px;} </style> <input id="a1" type="checkbox" /><label for="a1" hidefocus="hidefocus">.com</label> <input id="a2" type="checkbox" /><label for="a2" hidefocus="hidefocus">.net</label> <input id="a3" type="checkbox" /><label for="a3" hidefocus="hidefocus">.com.cn</label> <input id="a4" type="checkbox" /><label for="a4" hidefocus="hidefocus">.net.cn</label><br /> <input id="a5" type="checkbox" /><label for="a5" hidefocus="hidefocus">.org.cn</label> <input id="a6" type="checkbox" /><label for="a6" hidefocus="hidefocus">.gov.cn</label> <input id="a7" type="checkbox" /><label for="a7" hidefocus="hidefocus">.cn</label> <input id="a8" type="checkbox" /><label for="a8" hidefocus="hidefocus">.biz</label> </body> </html> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] 直接在表单元素上使用CSS，这个思路页面代码最少。思路三： <style> .demo{float:left;width:100px;} </style> <div style="width:400px"> <div class="demo"><input type="checkbox" /> 钩钩</div> <div class="demo"><input type="checkbox" /> 钩钩</div> <div class="demo"><input type="checkbox" /> 钩钩</div> <div class="demo"><input type="checkbox" /> 钩钩</div> <div class="demo"><input type="checkbox" /> 钩钩</div> <div class="demo"><input type="checkbox" /> 钩钩</div> <div class="demo"><input type="checkbox" /> 钩钩</div> <div class="demo"><input type="checkbox" /> 钩钩</div> </div> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] 每个单元都写在一个块对象里，写个样式让文本流向对象的右边，并统一宽度 .demo{float:left;width:150px} 请问这三个思路哪个更可取？或者说这三种思路分别使用在什么样的情况下最佳？谢谢指点！我的博客：http://blog.kysf.net
不是高手职务：普通成员等级：3 金币：5.0 发贴：1352 注册：2002/8/23 2:27:18	引用 #42004/12/18 10:41:18 3种情况不是一样的啊，只是不同的标签处理起来稍微不同而已照这样写，我用P/H1/SPAN都能写出来类似效果，那思路不要太多哦没什么最佳的，能表现出来就可以了！

每页显示15条 1/1 << <1 >>