ホームページ > ウェブフロントエンド > htmlチュートリアル > [ヘルプ] UL の下のボックスの左側にマージンがあるのはなぜですか? _html/css_WEB-ITnose

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

WBOY
リリース: 2016-06-24 12:09:05
オリジナル
1459 人が閲覧しました

<!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ですよ〜

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート