ホームページ > 記事 > ウェブフロントエンド > float：左 求解_html/css_WEB-ITnose
float：左 求解_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:46:07866ブラウズ
http://paste.ubuntu.com/10826550/
この float をどのように作成しますか? float: left を追加した後に浮かないのはなぜですか?
ディスカッション（解決策）への返信
li要素を横に並べて配置したいだけです。でも、li に float を追加した後、最初のものが浮き上がりました
わかりました、幅が足りません
<!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" /><title>列表模式的导航</title><style type="text/css">.site_nav { width:800px; }.site_nav h1 { display:none; }#nav ul, #nav li { list-style:none; padding:0; margin:0;}#nav li { height:22px;float:left;}#nav li a { display:block; height:100%; text-align:center; text-decoration:none; font:normal 12px/22px "宋体", Verdana,Lucida, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#333333;}#nav li a:hover { color:#000000; background-color:#E8E8E8;}</style></head><body><div class="site_nav"> <h1>站点导航</h1> <map id="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">个人介绍</a></li> <li><a href="#">作品展示</a></li> <li><a href="#">联系我们</a></li> </ul> </map></div></body></html> "}" が 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" /><title>列表模式的导航</title><style type="text/css">.site_nav { width:400px; }.site_nav h1 { display:none; }#nav ul, #nav li { list-style:none; padding:0; margin:0;}#nav li { float: left; height:22px; }#nav li a { padding: 0px 5px; display:block; height:100%; text-align:center; text-decoration:none; font:normal 12px/22px "宋体", Verdana,Lucida, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#333333;}#nav li a:hover { color:#000000; background-color:#E8E8E8;}</style></head><body><div class="site_nav"> <h1>站点导航</h1> <map id="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">个人介绍</a></li> <li><a href="#">作品展示</a></li> <li><a href="#">联系我们</a></li> </ul> </map></div></body></html> 声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。