首先,如果想要DD标签实现向<li>一样的控制样式(比如说,要使它的list-style生效),则必须得设置:display:list-item;,否则,list-style不生效。
另看代码:
<div class="viewadd">
<dl>
<dt>华中</dt>
<dd><input type="checkbox" name="srcorg" value="ZBHZBL01"/>巴陵办</dd>
<dd><input type="checkbox" name="srcorg" value="ZBHZCL01"/>长岭办</dd>
<dd><input type="checkbox" name="srcorg" value="ZBHZJM01"/>荆门办</dd>
<dd><input type="checkbox" name="srcorg" value="ZBHZLY01"/>洛阳办</dd>
<dd><input type="checkbox" name="srcorg" value="ZBHZWH01"/>武汉办</dd>
<dd><input type="checkbox" name="srcorg" value="ZBHZZY01"/>中原办</dd>
<dt>华东</dt>
<dd><input type="checkbox" name="srcorg" value="ZBHDYI01"/>仪征办</dd>
<dd><input type="checkbox" name="srcorg" value="ZBHDJL01"/>金陵办</dd>
<dd><input type="checkbox" name="srcorg" value="ZBHDGQ01"/>高桥办</dd>
<dd><input type="checkbox" name="srcorg" value="ZBHDJJ01"/>九江厂办</dd>
<dd><input type="checkbox" name="srcorg" value="ZBHDAQ01"/>安庆办</dd>
<dd><input type="checkbox" name="srcorg" value="ZBHDSH01"/>上海办</dd>
<dd><input type="checkbox" name="srcorg" value="ZBHDYZ01"/>扬子办</dd>
<dd><input type="checkbox" name="srcorg" value="ZBHDZH01"/>镇海办</dd>
<dt>华南</dt>
<dd><input type="checkbox" name="srcorg" value="ZBHDMM01"/>茂名办</dd>
<dd><input type="checkbox" name="srcorg" value="ZBHDGZ01"/>广州办</dd>
<dd><input type="checkbox" name="srcorg" value="ZBHDHN01"/>海南办</dd>
<dd><input type="checkbox" name="srcorg" value="ZBHDZJ01"/>湛江办</dd>
</dl>
</div>
想要达到这样的排列效果:
则必须设置:
dl dd {
float:left;
width:180px;
}
dl dt {
width:200px;
}
如果把dt标签的width属性去掉,则就会出现下面的效果:
记下来备忘,但原理不知道,呵呵。
- 大小: 29.3 KB
- 大小: 32.2 KB
分享到:
相关推荐
首先,`<dt>`标签用于定义一个图像,作为我们列表中的"术语"。我们可以通过设置`<img>`标签在`<dt>`中,然后指定图片的`src`属性指向所需的图片文件,例如: ```html <dt>图片描述"></dt> ``` 这里的`image_name....
`<dt>`是定义术语(Description Term)的标签,用来标记一个术语,而`<dd>`是定义描述(Description Description)的标签,用于解释或描述`<dt>`中的术语。 **为何使用DL-DT-DD实现表格** 1. **样式灵活性**:`...
有时,我们可能需要将一个现有的HTML页面及其CSS样式整合到.NET项目中,但在这个过程中可能会遇到样式显示不一致的问题。本文旨在深入探讨这种兼容性问题,并提供一系列解决方案。 #### 一、理解兼容性问题的本质 ...
### CSS+DIV编写经验总结之CSS样式小模板 #### 概述 随着互联网技术的不断发展,Web前端设计已经成为了一个至关重要的领域。对于前端开发者来说,掌握CSS+DIV布局技巧是必不可少的一项技能。本文将根据提供的内容...
默认情况下,列表项前会显示一个圆点,但可以通过CSS样式进行自定义。例如: ```html 项目1 项目2 项目3 ``` 2. **有序列表(Ordered List)** 有序列表用于显示需要按照特定顺序排列的项目,通常用数字...
一个`<dt>`可以对应一个或多个`<dd>`标签,用以提供多行或多段的解释。 在HTML代码示例中,可以看到`<dl>`、`<dt>`和`<dd>`的组合使用方式: ```html <dt>Today</dt> <dd>Today is yesterday.</dd> <dt>...
dl,dt,dd制作的CSS垂直菜单 在Web开发中,菜单是非常常见的交互元素,通常我们...使用 dl,dt,dd 标签和 CSS 样式可以创建一个美观的垂直菜单,这种方法具有良好的可读性和可维护性,同时也可以轻松地修改菜单的样式。
为了解决这些问题,他们选择了使用`<dl>`, `<dt>`, 和 `<dd>`元素,因为这种方法可以更好地进行布局,便于未来扩展,并且需要的CSS样式更少。 布局结构如下: ```html 标题 <dt>·博客里的文章是我自己写的!...
这里使用了多个`<dl>`元素,每个`<dl>`内部包含一个`<dt>`和一个`<dd>`。`<dt>`作为左侧的标题,而`<dd>`作为右侧的描述。这种结构非常适合实现左右布局的需求。 #### 五、CSS样式详解 接下来是CSS部分,这部分代码...
3. `h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,blockquote,pre,form,fieldset,legend,textarea,input,button,select{margin:0;padding:0;}`:针对标题、段落、列表等常用元素进行重置。 4. `table{border-collapse:...
12. **定义列表(dl)、定义项(dt)和定义描述(dd)**:`dt`通常作为术语,`dd`作为解释,两者之间有一定的间距。 这些默认样式在不同浏览器间可能存在差异,因此在进行跨浏览器开发时,可能需要通过CSS重置...
`<dt>`(definition term)是列表中的一个术语或名称,而`<dd>`(definition description)则是与之相关的解释或定义。这种结构使得代码更加清晰,更容易理解数据的含义。 对比`<table>`,使用`<dl>`, `<dt>`, `<dd...
总结起来,"reset.css文件.zip"是一个包含重置CSS样式的文件,用于消除浏览器对HTML元素的默认样式差异,提供一个干净的样式起点,便于开发者构建一致且可控的网页布局。使用它能帮助开发者节省时间,提高项目的跨...
CSS样式通常存储在样式表中,把样式添加到HTML 4.0中,是为了解决内容与表现分离的问题。 有以下三种方式来插入样式表: * 外部样式表:当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。 * 内部样式...
在这段内容中,我们看到了一个具体的实例,展示了如何通过CSS样式来实现`<dl>`、`<dt>`和`<dd>`元素的模拟表格效果。首先,通过设置`<dl>`、`<dt>`和`<dd>`的`margin`、`background`和`font-size`属性来统一列表的...
在这个例子中,我们创建了一个包含三个条目的定义列表,每个条目都有一个标题(`<dt>`)和一个描述(`<dd>`)。 应用场合: `<dl>`, `<dt>`, 和 `<dd>` 标签适用于多种场景,特别是当信息需要以有结构的方式呈现时...
div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,...
它们有时候会忽略不符合规范的标签结束标记,并且在同一个父元素内的LI(列表项)元素在文档树中会前后相连,这会导致布局问题。根据提供的描述,在DD和DT元素之间添加a标签导致了列表显示逐级向左,样式发生跑偏的...
通用的CSS Reset通过简单而有效的代码消除了浏览器间的样式差异,为前端开发者提供了一个干净的起点。对于初学者来说,理解和掌握这些基本的CSS Reset规则是非常重要的,它可以帮助你更好地控制页面布局和样式,同时...