html怎样让一个背景图片设置的和ul的大小一样？
我给一个ul设置了宽高然后给这个ul设置了一张空白的背景图片但是为什么这张背景图片比这个ul大呢这是为什么呢为什么左侧多出来一块白色区域呢<html><head><sty...
我给一个ul设置了宽高 然后给这个ul设置了一张空白的背景图片 但是为什么这张背景图片比这个ul大呢 这是为什么呢 为什么左侧多出来一块白色区域呢
<html>
<head>
<style type="text/css">
#div1{width:400px;height:400px;background:red;position:absolute;}
#tishi1{display:block;width:80px;height:220px;position:relative;background:url(tishi.jpg) no-repeat;}
#tishi1 li{height:31px;width:80px;text-align:center;line-height:31px;font-size:6px;display:block;background:green;}
</style>
</head>
<body>
<div id="div1">
<ul id="tishi1">
<li>aaa</li>
<li>vvv</li>
<li>ccc</li>
<li>bbb</li>
<li>rrr</li>
<li>tty</li>
<li>yyy</li>
</ul>
</div>
</body>
</html> 展开
<html>
<head>
<style type="text/css">
#div1{width:400px;height:400px;background:red;position:absolute;}
#tishi1{display:block;width:80px;height:220px;position:relative;background:url(tishi.jpg) no-repeat;}
#tishi1 li{height:31px;width:80px;text-align:center;line-height:31px;font-size:6px;display:block;background:green;}
</style>
</head>
<body>
<div id="div1">
<ul id="tishi1">
<li>aaa</li>
<li>vvv</li>
<li>ccc</li>
<li>bbb</li>
<li>rrr</li>
<li>tty</li>
<li>yyy</li>
</ul>
</div>
</body>
</html> 展开
1个回答
展开全部
出现这个情况是因为没有css reset，我引入了meyerweb的css reset代码就解决了，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>html怎样让一个背景图片设置的和ul的大小一样？</title>
<style type="text/css">
/*--开始 Reset CSS--*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*--结束 Reset CSS--*/
#div1{width:400px;height:400px;background:red;position:absolute;}
#tishi1{display:block;width:80px;height:217px;position:relative;background:#fff;}
#tishi1 li{height:31px;width:80px;text-align:center;line-height:31px;font-size:6px;display:block;background:green;}
</style>
</head>
<body>
<div id="div1">
<ul id="tishi1">
<li>aaa</li>
<li>vvv</li>
<li>ccc</li>
<li>bbb</li>
<li>rrr</li>
<li>tty</li>
<li>yyy</li>
</ul>
</div>
</body>
</html>
以上代码，我把tishi1的background改为#fff的，因为你没有把图片上传，测试结果如下图显示：
如果还是无法解决的，请追问。
更多追问追答
追问
你写的看不懂啊 本来挺简单的 你弄复杂了
追答
这个css reset必须要的，如果没有这个你做浏览器兼容的时候，就知道痛苦了。你百度下css reset吧，加深了解。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
