dl dt dd一行两列并且每一组dl之间自动换行

iou3344 2016-01-23 02:36:48
<!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=utf-8" />
</head>
<body>
<style>
#search{display:none}
#search .box{ position:absolute; width:75%; padding:10px 20px 20px 20px; background:#fff; z-index:999999;}
#search .subm{ float:right; cursor:pointer}
#search dl{display:block; width:101%;}
#search .secondary{list-style:none; width:50%;float:left}
#search dt{font-size:14px;color:red;}
</style>
<div class="box">
<dl class="actor">
<dt>第一大类</dt>
<dd class="secondary"><label><input type="checkbox" value="小类1"> 一小类1</label></dd>
<dd class="secondary"><label><input type="checkbox" value="小类2"> 一小类2</label></dd>
<dd class="secondary"><label><input type="checkbox" value="小类3"> 一小类3</label></dd>
<dd class="secondary"><label><input type="checkbox" value="小类4"> 一小类4</label></dd>
<dd class="secondary"><label><input type="checkbox" value="小类5"> 一小类5</label></dd>
<dd class="secondary"><label><input type="checkbox" value="小类6"> 一小类6</label></dd>
<dd class="secondary"><label><input type="checkbox" value="小类7"> 一小类7</label></dd>
</dl>

<dl class="classification">
<dt>第二大类</dt>
<dd class="secondary"><label><input type="checkbox" value="小类1"> 二小类1</label></dd>
<dd class="secondary"><label><input type="checkbox" value="小类2"> 二小类2</label></dd>
<dd class="secondary"><label><input type="checkbox" value="小类3"> 二小类3</label></dd>
<dd class="secondary"><label><input type="checkbox" value="小类4"> 二小类4</label></dd>
<dd class="secondary"><label><input type="checkbox" value="小类5"> 二小类5</label></dd>
<dd class="secondary"><label><input type="checkbox" value="小类6"> 二小类6</label></dd>
<dd class="secondary"><label><input type="checkbox" value="小类7"> 二小类7</label></dd>
<dd class="secondary"><label><input type="checkbox" value="小类8"> 二小类8</label></dd>
</dl>

<dl class="series">
<dt>第三大类</dt>
<dd class="secondary"><label><input type="checkbox" value="小类1"> 三小类1</label></dd>
</dl>

<dl class="producers">
<dt>第四大类</dt>
<dd class="secondary"><label><input type="checkbox" value="小类1"> 四小类1</label></dd>
<dd class="secondary"><label><input type="checkbox" value="小类1"> 四小类2</label></dd>
<dd class="secondary"><label><input type="checkbox" value="小类1"> 四小类3</label></dd>
</dl>


<dl class="publisher">
<dt>第五大类</dt>
<dd class="secondary"><label><input type="checkbox" value="小类1"> 五小类1</label></dd>
<dd class="secondary"><label><input type="checkbox" value="小类1"> 五小类2</label></dd>
</dl>
</div>
</body>
</html>


怎么排成如图所示的样式呢?

...全文
388 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
iou3344 2016-01-23
  • 打赏
  • 举报
回复
<!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=utf-8" />
</head>
<body>
<style>
*{margin:0; padding:0;}
.box{ position:absolute; width:75%; padding:10px 20px 20px 20px; background:#fff; z-index:999999;}
.box dl{display:block; width:100%;margin-bottom:50px;}
.box dt{font-size:14px;color:red; line-height:20px; font-weight:bold;}
.box dd{ width:49%;float:left; line-height:30px; }
</style>
<div class="box">
	<dl class="actor">
	<dt>第一大类</dt>
		<dd class="secondary"><label><input type="checkbox" value="小类1"> 一小类1</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类2"> 一小类2</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类3"> 一小类3</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类4"> 一小类4</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类5"> 一小类5</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类6"> 一小类6</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类7"> 一小类7</label></dd>
	</dl>

	<dl class="classification">
	<dt>第二大类</dt>
		<dd class="secondary"><label><input type="checkbox" value="小类1"> 二小类1</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类2"> 二小类2</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类3"> 二小类3</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类4"> 二小类4</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类5"> 二小类5</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类6"> 二小类6</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类7"> 二小类7</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类8"> 二小类8</label></dd>
	</dl>

	<dl class="series">
	<dt>第三大类</dt>
		<dd class="secondary"><label><input type="checkbox" value="小类1"> 三小类1</label></dd>
	</dl>

	<dl class="producers">
	<dt>第四大类</dt>
		<dd class="secondary"><label><input type="checkbox" value="小类1"> 四小类1</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类1"> 四小类2</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类1"> 四小类3</label></dd>
	</dl>


	<dl class="publisher">
	<dt>第五大类</dt>
		<dd class="secondary"><label><input type="checkbox" value="小类1"> 五小类1</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类1"> 五小类2</label></dd>
	</dl>
</div>
</body>
</html>
主要是发现dt不会强制换行导致的
浪子回头8 2016-01-23
  • 打赏
  • 举报
回复
改成这样即可:

<!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=utf-8" />
</head>
<body>
<style>
*{margin:0; padding:0;}
.box{ position:absolute; width:75%; padding:10px 20px 20px 20px; background:#fff; z-index:999999;}
.box dl{display:block; width:100%;}
.box dt{font-size:14px;color:red; line-height:30px; font-weight:bold;}
.box dd{ width:49%;float:left; line-height:30px; }
</style>
<div class="box">
	<dl class="actor">
	<dt>第一大类</dt>
		<dd class="secondary"><label><input type="checkbox" value="小类1"> 一小类1</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类2"> 一小类2</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类3"> 一小类3</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类4"> 一小类4</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类5"> 一小类5</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类6"> 一小类6</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类7"> 一小类7</label></dd>
	</dl>

	<dl class="classification">
	<dt>第二大类</dt>
		<dd class="secondary"><label><input type="checkbox" value="小类1"> 二小类1</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类2"> 二小类2</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类3"> 二小类3</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类4"> 二小类4</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类5"> 二小类5</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类6"> 二小类6</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类7"> 二小类7</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类8"> 二小类8</label></dd>
	</dl>

	<dl class="series">
	<dt>第三大类</dt>
		<dd class="secondary"><label><input type="checkbox" value="小类1"> 三小类1</label></dd>
	</dl>

	<dl class="producers">
	<dt>第四大类</dt>
		<dd class="secondary"><label><input type="checkbox" value="小类1"> 四小类1</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类1"> 四小类2</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类1"> 四小类3</label></dd>
	</dl>


	<dl class="publisher">
	<dt>第五大类</dt>
		<dd class="secondary"><label><input type="checkbox" value="小类1"> 五小类1</label></dd>
		<dd class="secondary"><label><input type="checkbox" value="小类1"> 五小类2</label></dd>
	</dl>
</div>
</body>
</html>

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧