ホームページ > 記事 > ウェブフロントエンド > dl dt dd 1 行 2 列で、dl_html/css_WEB-ITnose の各グループ間で自動的に折り返されます。
dl dt dd 1 行 2 列で、dl_html/css_WEB-ITnose の各グループ間で自動的に折り返されます。
- WBOYオリジナル
- 2016-06-21 08:58:272857ブラウズ
<!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> 写真のように配置するにはどうすればよいですか?
ディスカッションへの返信 (解決策) :
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。