怎样更改css中list-style 里面的图片的大小?
我想控制ulli列表前面图片的大小,怎么弄呢?html布局文件如下:<divclass="indicator_list"><ul><li>一般检查<ulstyle="di...
我想控制ul li列表前面图片的大小,怎么弄呢?
html布局文件如下:
<div class="indicator_list">
<ul> <li>一般检查 <ul style="display: none"> <li>体脂肪率测定</li> <li>体脂肪率测定2</li> <li>体脂肪率测定3</li> <li>体脂肪率测定4</li> <li>体脂肪率测定5</li> </ul> <span><img src="./images/store_right_arrow@2x.png"></span> </li> </ul>
</div>
css 代码如下:
.indicator_list ul{ list-style:square inside url('../images/helper_expand@2x.png');} 展开
html布局文件如下:
<div class="indicator_list">
<ul> <li>一般检查 <ul style="display: none"> <li>体脂肪率测定</li> <li>体脂肪率测定2</li> <li>体脂肪率测定3</li> <li>体脂肪率测定4</li> <li>体脂肪率测定5</li> </ul> <span><img src="./images/store_right_arrow@2x.png"></span> </li> </ul>
</div>
css 代码如下:
.indicator_list ul{ list-style:square inside url('../images/helper_expand@2x.png');} 展开
展开全部
这个属性是列表中li的样式,对于其前面的项目符号的大小是根据其内容一般是字体的大小来匹配的,详细解释如下:
1、实例一:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>百度知道</li>
<li>百度知道</li>
<li>百度知道</li>
<li>百度知道</li>
<li>百度知道</li>
<li>百度知道</li>
</ul>
</body>
</html>
因为此时字体是默认大小,其项目符号和字体匹配大小,其显示结果如下图:
实例二:
此时我们更改字体大小,其代码和显示效果如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li{
font-size: 30px;
}
</style>
</head>
<body>
<ul>
<li>百度知道</li>
<li>百度知道</li>
<li>百度知道</li>
<li>百度知道</li>
<li>百度知道</li>
<li>百度知道</li>
</ul>
</body>
</html>
效果如下,项目符号随着字体的增大而增大,如下图:
展开全部
首先不建议你用这种方法,最好是给li添加背景图片,其次这个大小的问题,如果能直接切成自己想要的大小是最好的,如果不能那就用css3的新属性background-size实现。不过这个新属性兼容性不好,所以你最好还是将背景图切成想要的大小。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
切图,做背景图片,写background,background-size,不要写在ul上,写在li上 li写padding-left或者text-indent
.indicator_list ul { list-style:none; background:url('../images/helper_expand@2x.png') no-repeat 0 0;text-indent:222px}
222px改为合适的值
如果要缩放../images/helper_expand@2x.png的尺寸,写background-size
.indicator_list ul { list-style:none; background:url('../images/helper_expand@2x.png') no-repeat 0 0;text-indent:222px}
222px改为合适的值
如果要缩放../images/helper_expand@2x.png的尺寸,写background-size
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
你可以用background-size,可以是具体的值也可以是:cover、contain;具体是什么根据自己的要求调整。如果对这个样式属性不熟悉,可以去百度下 ,很容易的
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询