ホームページ >ウェブフロントエンド >htmlチュートリアル >[ヘルプ] UL のサブメニューは自動的にインライン化されますか? _html/css_WEB-ITnose
[ヘルプ] UL のサブメニューは自動的にインライン化されますか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:32:41836ブラウズ
<!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=gb2312" /> </head> <style>ul { margin: 0px; padding: 0px; background:#333; width:949px;}ul li{float:left; display:inline; list-style:none; height:30px; width:100px;}ul li ul{display:block ;} </style> <div style="width:949;"><ul><li><a href="#"><span>ALL</span></a> <ul> <li style="display:block"><a href="#"><span>all</span></a></li> <li style="display:block"><a href="#"><span>all</span></a></li> <li style="display:block"><a href="#"><span>all</span></a></li> <li style="display:block"><a href="#"><span>all</span></a></li> </ul> </li><li><a href="#"><span>name</span></a></li><li><a href="#"><span>name</span></a></li><li><a href="#"><span>name</span></a></li><li><a href="#"><span>name</span></a></li><li><a href="#"><span>name</span></a></li><li><a href="#"><span>name</span></a></li></ul></div>
ディスカッションへの返信 (解決策)
自動インライン化?
ポスターの意味が分かりません。
自動インライン化?
ポスターの意味が分かりません。 レベル2メニューの効果を実現します。
------------------
!
!
この効果はこんな感じです -------------- -- ------------------------
<!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=gb2312" /> </head> <style>ul.menu { margin: 0px; padding: 0px; background:#333; width:949px;}ul.menu li{float:left; display:inline; list-style:none; height:30px; width:100px;}ul.menu li ul{display:block ;} </style> <div style="width:949;"><ul class="menu"><li><a href="#"><span>ALL</span></a> <ul> <li style="display:block"><a href="#"><span>all</span></a></li> <li style="display:block"><a href="#"><span>all</span></a></li> <li style="display:block"><a href="#"><span>all</span></a></li> <li style="display:block"><a href="#"><span>all</span></a></li> </ul> </li><li><a href="#"><span>name</span></a></li><li><a href="#"><span>name</span></a></li><li><a href="#"><span>name</span></a></li><li><a href="#"><span>name</span></a></li><li><a href="#"><span>name</span></a></li><li><a href="#"><span>name</span></a></li></ul></div>E なぜ私は & lt; style = "Display: block;"} が機能しません?
それは機能しますが、幅の値はあなたが書いた ul スタイルで設定されます。このスタイルは li 内の ul 要素にも有効です。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。