当前位置：首页 → 问答吧 → 这种布局怎么做好

这种布局怎么做好

时间：2010-08-26

来源：互联网

作者: cloudgamer 发布时间: 2010-08-26

用table吧,
个人感觉从图上看来是个标准的表的形式

作者: 鱼发布时间: 2010-08-26

1、全部table最省事。
2、如下：

复制内容到剪贴板

代码:

[ 本帖最后由 chenjmdgjl 于 2010-8-26 15:23 编辑 ]

作者: chenjmdgjl 发布时间: 2010-08-26

版主教了一招
结构是这样的：
<label>影音技术</label>
<ul><li></li><li></li><li></li></ul>
样式就这样写：
label { float:left;}
ul { overflow:hidden; zoom:1;}
但未知是什么原理

作者: cloudgamer 发布时间: 2010-08-26

原理是用<table>会和图示中的对齐有出入，你也看到第一行的4个input和下面第三行的2个input对齐并不一致，
然后还有用版主教的方式更容易实现虚线底框，而不用去考虑table的兼容问题，
所以如果是我的也会用版主的这种布局方式，但不一定第一个标签用<label>

作者: aocher 发布时间: 2010-08-26

用table不易于扩展。毕竟图上的input并不是按列对齐的。
我倾向于类似以下结构

.digTec {border-bottom:1px dotted #ccc;float:left;width:700px}
  .title {width:200px;float:left}
  .set {width:500px;float:left}
.digTec .option {float:left;width:150px}

<div class="digTec">
  <div class="title">数字智能技术</div>
  <div class="set">
<div class="option"><input type="checkbox"><label>3D</label></div>
<div class="option"><input type="checkbox"><label>无线网络</label></div>
  </div>
</div>

作者: zhutianyi 发布时间: 2010-08-26

到底原理是啥呢

作者: cloudgamer 发布时间: 2010-08-30

如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

作者: kobekaisa 发布时间: 2010-08-30

用label显示列名更有语义

[ 本帖最后由 kobekaisa 于 2010-8-30 17:37 编辑 ]

作者: kobekaisa 发布时间: 2010-08-30

不知道是指哪个原理？如果是指布局上的

overflow：hidden会在标准浏览器创建新的块格式化上下文。zoom：1触发ie的haslayout，使其拥有和overflow：hidden类似行为。这个行为就是块级元素布局受到浮动影响：块级元素不会重叠浮动元素，他们各自拥有自己的作用范围而不相容。

结果表现就是一个label后面更着一个ul块。看这个测试：http://www.brunildo.org/test/FloatMarginOverflow.html

作者: iifksp 发布时间: 2010-08-30

我认为语义化理解最佳的还是用<dl><dt><dd></dd></dt></dl>来做吧...

作者: aioros2009 发布时间: 2010-09-01

dl dt dd 比较合适

一行就是一个dl

作者: HeTingYi 发布时间: 2010-09-01