【求助】为什么在UL下的框左边会有边距？_html/css

【求助】为什么在UL下的框左边会有边距？_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 12:09:05

原创

1635人浏览过

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

登录后复制

有道小P

有道小P，新一代AI全科学习助手，在学习中遇到任何问题都可以问我。

查看详情

回复讨论(解决方案)

默认情况下，body，ul 等标签有margin，padding值，需要重置一下默认值。

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; }

在你的css加上
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;}

默认情况下，body，ul 等标签有margin，padding值，需要重置一下默认值。
margin，padding设置成0就行了。另外样式也设置成none

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

*{margin:0;padding:0;}改变所有属性的默认样式的内外编剧都为0，就可以了~

谢谢大家了已经解决了