Heim > Artikel > Web-Frontend > 如何让li保持在ul里面_html/css_WEB-ITnose
如何让li保持在ul里面_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:31:541188Durchsuche
<!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" /><title>无标题文档</title><style>*{ pading:0px; margin:0px; border:double;}li{ list-style-type:none; float:left; width:200px; display:inline-block;}.classmate{ padding:20px;}.exteninfo{ clear:both;}ul{ padding:0px;}</style> </head><body><div class="classmates"> <div class="classmate"> <div class="baseinfo"> <ul> <li>姓名</li> <li>性别</li> <li>生日</li> <li>邮箱</li> <li>电话</li> <li>qq</li> </ul> </div> <div class="recommend"> <p>alkjshfgkahafo;alsksdfkhasdklfhasdjfkjasiuaebhgjlsdhg;hseikgh</p> </div> </div></div> 在ul里面的li如果使用float使他在一行显示的话,外面的ul的框就很矮.li比ul高.如果使用display:inline使他在一行显示的话,li的宽度就无法设置 始终是最小宽度.请问怎么才能让他又在一行显示,li的宽度又可以设置,外面ul的高度也可以包围住li
回复讨论(解决方案)
分别为ul和li设置高度，使ul能够包围li
ul{overflow:hidden;}
分别设置高度不是很灵活.解决方法我发现是使用dispaly:inline-block
overflow:hidden;加个这个就可以了
ul加个overflow:auto，或者让ul跟LI一样浮动起来。。或者是加固定的宽高
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：css position 问题_html/css_WEB-ITnoseNächster Artikel：ie hover z-index没效果_html/css_WEB-ITnose