dl dt dd一行两列并且每一组dl之间自动换行_html/css_WEB-ITnose

WBOY
發布: 2016-06-21 08:58:27
原創
2856 人瀏覽過

<!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>
登入後複製


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


回复讨论(解决方案)

改成这样即可:

<!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>
登入後複製

<!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不会强制换行导致的

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!