Home > Article > Web Front-end > 如何让li保持在ul里面_html/css_WEB-ITnose
如何让li保持在ul里面_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:31:541189browse
<!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一样浮动起来。。或者是加固定的宽高
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css position 问题_html/css_WEB-ITnoseNext article：ie hover z-index没效果_html/css_WEB-ITnose