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

WBOY
Freigeben: 2016-06-21 08:58:27
Original
2873 Leute haben es durchsucht

<!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>
Nach dem Login kopieren


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


回复讨论(解决方案)

改成这样即可:

<!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>
Nach dem Login kopieren

<!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>
Nach dem Login kopieren


主要是发现dt不会强制换行导致的

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage