コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > li を ul_html/css_WEB-ITnose に保持する方法

li を ul_html/css_WEB-ITnose に保持する方法

WBOY
リリース： 2016-06-21 09:31:54
オリジナル
1204 人が閲覧しました

<!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 のようにフロートさせます。 。または、固定の幅と高さを追加します

関連ラベル：
如何让li保持在ul里面
ソース：php.cn
前の記事：CSS 位置の問題_html/css_WEB-ITnose 次の記事：つまり、ホバー z-index には効果がありません_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2066
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2229
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1873
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1756
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1789
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート