请问高手,做HTML网页,ul li项目列表符号设置自己下载的图片位置居中问题?

请问高手,做HTML网页,ul li项目列表符号设置自己下载的图片位置居中问题?,第1张

我写你这种从来用的都不是ul li项目列表符号,你把橘色原点切成一个背景图,给你写个例子

div li{ background:url(images/banner_img1jpg) no-repeat left center; margin-left:5px; padding-left:5px+你背景的宽度;

1、首先在html编辑器中新建一个html文件,写入一个div并给div设置class属性,然后在div里面设置一个无序列表:

2、接着设置一下div的样式,给它一个宽度和高度及背景颜色即可。然后设置div中的ul的属性的display的属性值为table,之后在设置margin的值上下边距为0,左右为auto,ul列表就居中了:

3、最后打开浏览器查看效果,可以看到div中的列表诗句中的。以上就是html无序列表在div中居中的方法介绍:

要实现UL标签水平居中,关键在于CSS中 display:inline 的运用。

HTML代码具体示例:

<div id="links">

<ul>

<li><a href="#">  </a></li>

<li><a href="#">  </a></li>

<li><a href="#">   </a></li>

<li><a href="#">   </a></li>

<li><a href="#">   </a></li>

</ul>

</div>

注意:如果UL没有设置宽度,用margin:0 autl是没有用的,因为它默认了100%,给它一个宽度,实际宽度或者width:auto都可以。

扩展资料:

在HTML中,有两种类型的列表:无序列表 - 列表项标记用特殊图形(如小黑点、小方框等);有序列表 - 列表项的标记有数字或字母。使用CSS,可以列出进一步的样式,并可用图像作列表项标记。

用CSS设置UL标签的列表符号是不需要去设置的,因为ul默认就是标签符号的,如果使用了这个list-style:none;去掉了这个属性,然后又想有的话,就给这个ul一个id或者是class,然后在css中list-style-type:disc !important,这样就又有序号了。

参考资料:

UL_百度百科

1、将li的height和line-height设置成为和设计稿一样的2、将列表图标整体切出来,铺在ul上,不平铺3、使用background-position控制ul背景和li中的文字对齐即可。。。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/13325371.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-15
下一篇 2023-07-15

发表评论

登录后才能评论

评论列表(0条)

保存