Heim > Artikel > Web-Frontend > dl dt dd一行两列并且每一组dl之间自动换行_html/css_WEB-ITnose
dl dt dd一行两列并且每一组dl之间自动换行_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:58:272854Durchsuche
<!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不会强制换行导致的
Stellungnahme：
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
Vorheriger Artikel：免费使用！20款精致优质的HTML网站模板和小组件下载_html/css_WEB-ITnoseNächster Artikel：求帮忙，这个网站的背景效果是怎么实现的？http://thefoxwp.com/_html/css_WEB-ITnose