`
oldbig
  • 浏览: 76062 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

一个DD,DT的CSS样式的问题

dd 
阅读更多
首先,如果想要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
0
0
分享到:
评论

相关推荐

    dl dd dt实现的图文混排效果

    首先,`&lt;dt&gt;`标签用于定义一个图像,作为我们列表中的"术语"。我们可以通过设置`&lt;img&gt;`标签在`&lt;dt&gt;`中,然后指定图片的`src`属性指向所需的图片文件,例如: ```html &lt;dt&gt;图片描述"&gt;&lt;/dt&gt; ``` 这里的`image_name....

    DL-Dt-DD(做表格Css实现)

    `&lt;dt&gt;`是定义术语(Description Term)的标签,用来标记一个术语,而`&lt;dd&gt;`是定义描述(Description Description)的标签,用于解释或描述`&lt;dt&gt;`中的术语。 **为何使用DL-DT-DD实现表格** 1. **样式灵活性**:`...

    html与.net css样式兼容问题解决办法

    有时,我们可能需要将一个现有的HTML页面及其CSS样式整合到.NET项目中,但在这个过程中可能会遇到样式显示不一致的问题。本文旨在深入探讨这种兼容性问题,并提供一系列解决方案。 #### 一、理解兼容性问题的本质 ...

    CSS+DIV编写经验总结之CSS样式小模板

    ### CSS+DIV编写经验总结之CSS样式小模板 #### 概述 随着互联网技术的不断发展,Web前端设计已经成为了一个至关重要的领域。对于前端开发者来说,掌握CSS+DIV布局技巧是必不可少的一项技能。本文将根据提供的内容...

    HTML 列表中的dl,dt,dd,ul,li,ol区别及应用.doc

    默认情况下,列表项前会显示一个圆点,但可以通过CSS样式进行自定义。例如: ```html 项目1 项目2 项目3 ``` 2. **有序列表(Ordered List)** 有序列表用于显示需要按照特定顺序排列的项目,通常用数字...

    DD DT DL标签使用示例

    一个`&lt;dt&gt;`可以对应一个或多个`&lt;dd&gt;`标签,用以提供多行或多段的解释。 在HTML代码示例中,可以看到`&lt;dl&gt;`、`&lt;dt&gt;`和`&lt;dd&gt;`的组合使用方式: ```html &lt;dt&gt;Today&lt;/dt&gt; &lt;dd&gt;Today is yesterday.&lt;/dd&gt; &lt;dt&gt;...

    dl,dt,dd制作的CSS垂直菜单

    dl,dt,dd制作的CSS垂直菜单 在Web开发中,菜单是非常常见的交互元素,通常我们...使用 dl,dt,dd 标签和 CSS 样式可以创建一个美观的垂直菜单,这种方法具有良好的可读性和可维护性,同时也可以轻松地修改菜单的样式。

    CSS教程:用dl dt dd来制作列表

    为了解决这些问题,他们选择了使用`&lt;dl&gt;`, `&lt;dt&gt;`, 和 `&lt;dd&gt;`元素,因为这种方法可以更好地进行布局,便于未来扩展,并且需要的CSS样式更少。 布局结构如下: ```html 标题 &lt;dt&gt;·博客里的文章是我自己写的!...

    DL.DT.DD实现左右的布局简单例子第1/2页

    这里使用了多个`&lt;dl&gt;`元素,每个`&lt;dl&gt;`内部包含一个`&lt;dt&gt;`和一个`&lt;dd&gt;`。`&lt;dt&gt;`作为左侧的标题,而`&lt;dd&gt;`作为右侧的描述。这种结构非常适合实现左右布局的需求。 #### 五、CSS样式详解 接下来是CSS部分,这部分代码...

    CSS中常用的 reset.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:...

    HTML标签的默认CSS样式汇总

    12. **定义列表(dl)、定义项(dt)和定义描述(dd)**:`dt`通常作为术语,`dd`作为解释,两者之间有一定的间距。 这些默认样式在不同浏览器间可能存在差异,因此在进行跨浏览器开发时,可能需要通过CSS重置...

    用标准dl,dt,dd标签抛弃table列表

    `&lt;dt&gt;`(definition term)是列表中的一个术语或名称,而`&lt;dd&gt;`(definition description)则是与之相关的解释或定义。这种结构使得代码更加清晰,更容易理解数据的含义。 对比`&lt;table&gt;`,使用`&lt;dl&gt;`, `&lt;dt&gt;`, `&lt;dd...

    reset.css文件.zip

    总结起来,"reset.css文件.zip"是一个包含重置CSS样式的文件,用于消除浏览器对HTML元素的默认样式差异,提供一个干净的样式起点,便于开发者构建一致且可控的网页布局。使用它能帮助开发者节省时间,提高项目的跨...

    html&css入门基础知识点.pdf

    CSS样式通常存储在样式表中,把样式添加到HTML 4.0中,是为了解决内容与表现分离的问题。 有以下三种方式来插入样式表: * 外部样式表:当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。 * 内部样式...

    CSS 之dl dt dd模拟表格实例代码

    在这段内容中,我们看到了一个具体的实例,展示了如何通过CSS样式来实现`&lt;dl&gt;`、`&lt;dt&gt;`和`&lt;dd&gt;`元素的模拟表格效果。首先,通过设置`&lt;dl&gt;`、`&lt;dt&gt;`和`&lt;dd&gt;`的`margin`、`background`和`font-size`属性来统一列表的...

    html 标签 dl dt dd使用说明

    在这个例子中,我们创建了一个包含三个条目的定义列表,每个条目都有一个标题(`&lt;dt&gt;`)和一个描述(`&lt;dd&gt;`)。 应用场合: `&lt;dl&gt;`, `&lt;dt&gt;`, 和 `&lt;dd&gt;` 标签适用于多种场景,特别是当信息需要以有结构的方式呈现时...

    css 清除浏览器默认样式

    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,...

    解决IE7下在DD DT中插入a元素导结果列表显示逐级向左

    它们有时候会忽略不符合规范的标签结束标记,并且在同一个父元素内的LI(列表项)元素在文档树中会前后相连,这会导致布局问题。根据提供的描述,在DD和DT元素之间添加a标签导致了列表显示逐级向左,样式发生跑偏的...

    通用的css reset

    通用的CSS Reset通过简单而有效的代码消除了浏览器间的样式差异,为前端开发者提供了一个干净的起点。对于初学者来说,理解和掌握这些基本的CSS Reset规则是非常重要的,它可以帮助你更好地控制页面布局和样式,同时...

Global site tag (gtag.js) - Google Analytics