[Help] Why is there a margin on the left side of the box under UL? _html/css

[Help] Why is there a margin on the left side of the box under UL? _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:09:05

Original

1459 people have browsed it

<!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>

Copy after login

Reply to discussion (solution)

By default, tags such as body and ul have margin and padding values, which need to be repeated Set the default value.

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, tbody {list-style:none; margin:0px; padding:0px; }

Add
body{ margin:0; padding: 0; font:12px/1.5 Microsoft YaHei;background:#f2f2f2}
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, img, small, strike, sub, sup, tt, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; }
input{background:none;border:none;}
ul , li { list-style:none;}

By default, body , ul and other tags have margin and padding values, which need to be reset to the default values.
Just set margin and padding to 0. In addition, the style is also set to none

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

*{margin:0;padding:0;} Change the default style of all attributes to 0 for both internal and external screenwriters, and that’s it~

Thank you everyone, it has been solved