コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > li でネストされた ul のマージンの問題、助けてください_html/css_WEB-ITnose

li でネストされた ul のマージンの問題、助けてください_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:46:29
オリジナル
1543 人が閲覧しました


写真の 4 番目の li にネストされた ul があります。ネストされた ul の li の背景色を設定するとき、ネストされたすべての ul を li にネストできるとは限りません。
どうやって解決しますか？


ディスカッションへの返信 (解決策)

4 番目の li 表示: table;

ul, li パディングの設定: 0

4 番目の li 表示: table; 

<html lang='en'>	<head>		<meta charset='utf-8'>		<title>ul-study</title>		<style type="text/css">		.ul-01{list-style-type: none;}		.ul-01>li{float: left;margin: 5px;padding: 3px 10px; background-color: red;cursor: pointer;border-radius: 5px;}		.ul-02{list-style-type: none;margin: 0px;}		.ul-02>li{margin: 3px 0px;mbackground-color: blue;padding: 0px 10px;width: 100%;background-color: blue;}		</style>		<script type="text/javascript">			window.onload=function(){				var ulss=document.getElementById('ul-02-s');				function lish(para){					var lis=document.getElementsByName('lis');					for(var i=0;i<lis.length;i++){						lis[i].style.display=para;					}				}				ulss.onmouseover=function(){					lish("block");				}				ulss.onmouseout=function(){					lish("none");				}			}		</script>	</head>	<body>		<ul class='ul-01'>			<li>bbb</li>			<li>aaa</li>			<li>ccc</li>			<li style='padding:0px 0px;display:table;'>				<ul class='ul-02' id='ul-02-s'>					<li>请选择</li>					<li class='li-sh' name='lis'>111</li>					<li class='li-sh' name='lis'>222</li>					<li class='li-sh' name='lis'>333</li>				</ul>			</li>		</ul>	</body></html>
ログイン後にコピー

これはコードです。 table はまだ動作しません

ul と li のパディングを 0 に設定します

動作しません、試してみました
.ul-02>li{margin: 3px 0px;mbackground-color: blue;padding: 0px 10px; 背景色: 青;}

  • ccc


    • width を削除します

    pdding: 0 を設定すると解決できます。または、ul の幅またはパーセンテージを設定できます。 liは自由に変えられる

    関連ラベル：
    li中嵌套ul的边距问题，求大神
    ソース：php.cn
    前の記事：無効なメソッド (http 動詞) が使用されたため、探しているページを表示できません。 _html/css_WEB-ITnose 次の記事：display:none; と Visibility:hidden;_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
    2184
    Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
    から 2024-04-23 00:22:19
    0
    11
    2331
    子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
    から 2024-04-19 15:37:47
    0
    1
    1961
    親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
    から 2024-04-18 23:52:34
    0
    1
    1845
    CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
    から 2024-04-16 10:10:18
    0
    0
    1898
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート