[ヘルプ] UL の下のボックスの左側にマージンがあるのはなぜですか? _html/css

ディスカッション（解決策）に返信

ホームページ

ウェブフロントエンド

htmlチュートリアル

[ヘルプ] UL の下のボックスの左側にマージンがあるのはなぜですか? _html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:09 PM

<!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=gb2312" /> </head> <style>.shopzp{display:inline-block;         width:950px;		 background:#2e180d;		}.shopzp li {	display:inline;	width:100px;	float:left;	line-height:30px}.shopzp a {	position:relative;	left:-40px;	display:block;	text-decoration:none;	background:#cccccc;	width:100px;	}.shopzp a span {	display:block;	font-weight:bold;	color:#000;	text-align:center;	font-family:"微软雅黑";}.shopzp a em {	display:none;}.shopzp a:hover {	background:#FF0000;}.shopzp a:hover span {	color:#fff;}</style><ul class="shopzp">  <li><a href="#"><span>全部商品</span></a></li>  <li><a href="#"><span>首页</span></a></li>  <li><a href="#"><span>热卖宝贝</span></a></li>  <li><a href="#"><span>新品抢购</span></a></li>  <li><a href="#"><span>活动专区</span></a></li>  <li style="position:relative;right:-40;float:right; font-size:14px"><a href="#"><span>服务指南</span></a></li>  <li style="position:relative;right:-40;float:right; font-size:14px"><a href="#"><span>收藏店铺</span></a></li></ul>

ログイン後にコピー

ディスカッション（解決策）に返信

デフォルトでは、body、ul、およびその他のタグには margin と padding の値があり、デフォルト値をリセットする必要があります。

html、本文、div、dl、dt、dd、ul、ol、li、h1、h2、h3、h4、h5、h6、pre、コード、フォーム、フィールドセット、凡例、入力、ボタン、テキストエリア、p、 blockquote, th, td, tbody {list-style:none; margin:0px; }

body{ margin:0; font:12px/1.5 Microsoft YaHei;

h1、h2、h3、h4、h5、h6、p、blockquote、pre、a、略語、頭字語、アドレス、引用、コード、img、small、ストライク、サブ、sup、tt、dd、dl、dt、li 、ol、ul、フィールドセット、フォーム、ラベル、凡例、ボタン、テーブル、キャプション、tbody、tfoot、tad、tr、th、td {マージン: 0; ボーダー: 0;
input{background:none; ;border:none;}
ul , li { list-style:none;}

デフォルトでは、body、ul、およびその他のタグにはマージンとパディングの値が設定されています。デフォルト値をリセットする必要があります。

マージンとパディングを 0 に設定するだけです。さらに、スタイルも none に設定されます

.shopzp ul{margin:0; padding:left; clear:both;}

*{margin:0;padding:0;} によって内部が変更されます全属性のデフォルトスタイル外脚本家全員0ですよ〜

皆さんありがとうございます、解決しました

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。