首页 > web前端 > 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, 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,就可以了~

谢谢大家了 已经解决了

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板