ホームページ > 記事 > ウェブフロントエンド > [ヘルプ] UL の下のボックスの左側にマージンがあるのはなぜですか? _html/css_WEB-ITnose
<!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、およびその他のタグにはマージンとパディングの値が設定されています。デフォルト値をリセットする必要があります。
.shopzp ul{margin:0; padding:left; clear:both;}
*{margin:0;padding:0;} によって内部が変更されます全属性のデフォルトスタイル外 脚本家全員0ですよ〜
皆さんありがとうございます、解決しました