1. 首页
  2. 设置

设置li边框

本文主要为您介绍设置li边框,内容包括怎样使li的border变成单线边框,在HTML中如何设置边框,css如何给li里面的文字加上边框。<!doctype html><html><head><meta charset="utf-8"><title>;百度知道郭凯旗</

1.css如何给li里面的文字加上边框

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>;百度知道郭凯旗</title>

<style>

li a{display:block; width:100px; height:20px; border:1px solid red;}

li span{display:inline-block; width:80px; height:20px; border:1px solid blue;}

li{display:inline-block; width:80px; height:20px; border:1px solid black;}

</style>

</head>

<body>

<div>

<ul>

<li><a href=">;这三种都能实现,但不要同时用。

2.如何让ul 边框正常显示

将.mainContent中display属性值改为table,加个padding:0px

将.mainContent li加个display:inline;就搞定了。

整理如下:

.mainContent{

width:100%;height:20px;margin:0px;border:solid 1px red; display:table; padding:0px

}

.mainContent li{

float:left;width:auto;list-style:none !important;border:solid 1px gray;margin:0px;display:inline;

}

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

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

<style>

.ceshi{

width:100%;

height:30px;

background-color:#F00;

color:#FFF;

}

.ceshi ul{ width:820px; margin:0 auto;}

.ceshi ul li{width:180px; height:30px; float:left; list-style-type:none; text-align:center; line-height:30px; border-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:left; list-style-type:none;去除左侧的点,然后使字体居中对齐center;最后设置li标签的分隔线,这里用边框属性就可以实现此功能;border-right:1px solid #FFF; border是边框默认的是四周;border-right在li标签右侧添加边框也可以理解为分割线:solid为分隔线的样式;#FFF为分隔线的颜色;

设置li边框

本文来自投稿,不代表本站立场,如若转载,请注明出处。