怎么作用于<li>的文字先有横线

怎么作用于<li>的文字先有横线,第1张

标签修饰的内容将被加横线。

标签修饰的内容将被加横线。同时如果使用htmlli对文字内容横线样式,而不想显示下划线,但可以使用CSS样式设置去掉u标签下划线样式。

横线的符号是破折号。破折号是表示话题或语气的转变,声音的延续等的符号。

1、打开编辑测试的软件,设置一个div区域,li标签因为默认的需要换行,所以需要设置一个浮动点,float:left使其靠左浮动对齐;主要代码如下:

<style>

.ceshi{

width:100%

height:30px

background-color:#F00

color:#FFF

}

.ceshi ul{ width:820pxmargin:0 auto}

.ceshi ul li{width:180pxheight:30pxfloat:leftlist-style-type:nonetext-align:centerline-height:30pxborder-right:1px solid #FFF}

</style>

<div class="ceshi">

<ul>

<li>li标签右边框</li>

<li>li标签右边框</li>

<li>li标签右边框</li>

<li>li标签右边框</li>

</ul>

</div>

详解:设置一个宽度:100%,高度为30px的区域,再次设置一下背景颜色与字体颜色,使其区分开;

设置一个ul宽度,让其在div区域中居中对齐;

最后也是最关键的li标签设置:宽度180px高度同样30px;靠左浮动float:leftlist-style-type:none去除左侧的点,然后使字体居中对齐center最后设置li标签的分隔线,这里用边框属性就可以实现此功能;border-right:1px solid #FFF border是边框默认的是四周;border-right在li标签右侧添加边框也可以理解为分割线:solid为分隔线的样式;#FFF为分隔线的颜色;

实现li元素横向显示的方法有两种

一.就是楼上那位说的方法,其中语法我不在多说。但是当在浮动的li的时候不要忘了对起父元素ul进行浮动,应为如果你在ul上添加了背景的话,就会出现问题了,随着li元素的浮动,其父元素就会收缩。这样会打乱布局。解决这样的方法亦有两种。1.父元素的的浮动。2.添加额外的无语意的标签如<div id="clear"></div>#clear {

clear:both

}

li前面的黑点是默认的,不能改变大小,只能改变样式。

但是可以用背景图象实现。记住选择应用background:url()

的形式要比list-style-imag要好!原因就在于前者控制图象的能力要比后者强。


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

原文地址:https://www.54852.com/bake/11532281.html

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

发表评论

登录后才能评论

评论列表(0条)

    保存