html中加分隔符,html - 如何在CSS中的列表项之后添加分隔符 - 堆栈内存溢出

感谢您在尝试解决了很多问题后给我的回复。 是z-index属性造成了问题。 以正确的顺序设置z-index属性后，我可以在列表项之间添加分隔符，而无需使用border属性。 这是该代码：

HTML：-

Top 20 Files

• Today

------------------------

Yesterday

------------------------

This Week

------------------------

Last Week

------------------------

This Month

------------------------

Last Month

CSS：

@import url(normalize.css);

html,body

{

width: 100%;

height: 100%;

margin: 0px;

padding: 0px;

overflow-x: hidden;

background:url(../images/site_bg.png) no-repeat;

position: relative;

background-size: 100% 100%;

}

/*------------------------------Background---------------------------*/

/*-----------------------------Horizontal Menu Starts----------------*/

.head-menu {

background:url(img/menu_bg.png);

position: absolute;

left: 219px;

top: 117px;

width: 930px;

height: 81px;

}

.head-menu ul {

list-style: none;

position:relative;

}

.head-menu li a {

color: #FFFFFF;

line-height: 2.7;

line-width: 10px;

font-size: 17px;

text-align: left;

text-decoration: none;

text-transform: capitalize;

font-family: "Times New Roman";

color: rgb(255, 255, 255);

text-shadow: 0px 2px 1.96px rgba(0, 0, 0, 0.26);

-moz-transform: scale(1.39, 1.31);

-webkit-transform: scale(1.39, 1.31);

-ms-transform: scale(1.39, 1.31);

position: relative;

float: left;

left: -53px;

top: 2px;

}

.home {

margin-left:35px;

}

.allfiles {

margin-left:70px;

}

.ulpd_by_usrs {

margin-left:100px;

}

.upld_frm_mob {

margin-left:130px;

}

.contact {

margin-left:102px;

}

/*-----------------------------Horizontal Menu Ends----------------*/

/*--------------------------------------Top 20 Files Starts----------------------------*/

.Categories_Box1 ul {

position: relative;

list-style:none;

left: 0px;

top: 0px;

width: 1600px;

height: 1584px;

z-index:96;

}

.Categories_Box1 li a {

font-size: 22px;

font-family: "Exo";

position:relative;

text-decoration:none;

color: rgb(107, 107, 107);

font-weight: bold;

line-height: 2;

-moz-transform: matrix( 0.76907888849934,0,0,0.58955579248353,0,0);

-webkit-transform: matrix( 0.76907888849934,0,0,0.58955579248353,0,0);

-ms-transform: matrix( 0.76907888849934,0,0,0.58955579248353,0,0);

left: -34px;

top: 38px;

z-index:97;

}

.t20_files {

font-size: 29px;

font-family: "Exo";

color: rgb(237, 106, 61);

font-weight: bold;

line-height: 0.869;

position: absolute;

left: 227.937px;

top: 734px;

z-index:95;

}

.Rectangle1 {

background-color: rgb(107, 107, 107);

position: absolute;

left: 231px;

top: 799px;

width: 218px;

height: 5px;

z-index: 94;

}

.Outside_box1 {

border-style: solid;

border-width: 1px;

border-color: rgb(217, 217, 217);

border-radius: 5px;

background-color: rgb(242, 242, 242);

box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.36);

position: absolute;

left: 219px;

top: 748px;

width: 210px;

height: 326px;

z-index: 92;

}

.Inside_Box1 {

border-radius: 5px;

background-color: rgb(255, 255, 255);

position: absolute;

left: 221px;

top: 749px;

width: 235px;

height: 326px;

z-index: 93;

}

.line10 {

font-size: 28.12px;

font-family: "Arial";

color: rgb(221, 221, 221);

line-height: 4.2;

position: absolute;

width:220px;

left: 8.2px;

top: -5.75px;

}

.line11 {

font-size: 28.12px;

font-family: "Arial";

color: rgb(221, 221, 221);

line-height: 4.2;

position: absolute;

width:220px;

left: 8.2px;

top: 35.75px;

}

.line12 {

font-size: 28.12px;

font-family: "Arial";

color: rgb(221, 221, 221);

line-height: 4.2;

position: absolute;

width:220px;

left: 8.2px;

top: 80.25px;

}

.line13 {

font-size: 28.12px;

font-family: "Arial";

color: rgb(221, 221, 221);

line-height: 4.2;

position: absolute;

width:220px;

left: 8.2px;

top: 123.75px;

}

.line14 {

font-size: 28.12px;

font-family: "Arial";

color: rgb(221, 221, 221);

line-height: 4.2;

position: absolute;

width:220px;

left: 8.2px;

top: 168.25px;

}

/*-----------------Top 20 Files Ends----------------------------*/

如果您还有其他方法可以只使用一行而不是在每个列表项之后使用p类标记，请张贴它，以便我可以简化我的代码。 这是JS Fiddle链接： -JS Fiddle链接