html中li标签中这条边线怎么添加的

html中li标签中这条边线怎么添加的,第1张

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设置相等的左右边距(margin-left,margin-right),用总宽度1000px减去所有的li(包含左右边距),剩余的平分到外部div的左右填充里(padding)。

第二种方法:

因为你的li都是两个字,也可以给li定义一定的宽度,同时设置li里的文字居中对齐(textalign:center)接下来的方法就跟第一种方法相同了。用总宽度1000px减去所有的宽度,(包含左右的1px细线),剩余的平分到外部div的左右填充里(padding)。

就是33.33333%,不是js设置,是css里面设置li的width: 33.3333%

li要float: left浮动后才能在一行,或者display: inline-block之类的。


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

原文地址: http://outofmemory.cn/zaji/6223535.html

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

发表评论

登录后才能评论

评论列表(0条)

保存