Heim >Web-Frontend >HTML-Tutorial >float：left 求解_html/css_WEB-ITnose
float：left 求解_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:46:07946Durchsuche
http://paste.ubuntu.com/10826550/
这个怎么让他浮动啊，他怎么加了float：left之后怎么不浮动？
回复讨论(解决方案)
就是想让li元素横放在一起。但是给li加了浮动之后，就第一个个浮动了
好吧，明白了，宽度不够
<!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> 有两处少了“}”
<!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> 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：用少量的代码使用marquee 实现无缝滚动_html/css_WEB-ITnoseNächster Artikel：CSS 通用和分组选择器(十)_html/css_WEB-ITnose