ホームページ > 記事 > ウェブフロントエンド > li を ul_html/css_WEB-ITnose に保持する方法
li を ul_html/css_WEB-ITnose に保持する方法
- WBOYオリジナル
- 2016-06-21 09:31:541190ブラウズ
<!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 を 1 行で表示する場合、display:inline で 1 行で表示すると、ul の外側の枠が非常に短くなります。最小幅を設定できません。どうすれば1行に表示できますか? liの幅を設定でき、外側のulの高さもliを囲むことができます。解決策)
ul と li の高さをそれぞれ設定して、ul が li を囲むようにします
ul{overflow:hidden;}
高さを個別に設定することは、display:inline を使用することです。 -block
overflow:hidden; これを追加するだけです
ul overflow:auto を追加するか、UL を LI のようにフロートさせます。 。または、固定の幅と高さを追加します
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。