CSS ul li 2nd和以下列表項目有灰色垂直線

我需要修復一些現有的html內容。 CSS非常令人費解，但是，我有一件事情讓我無法擺脫。CSS ul li 2nd和以下列表項目有灰色垂直線

所有的ul列表都有一個圓圈/點和li項目文本之間的中間灰色垂直線。第一個項目沒有問題，只是在第一個項目後才一直出現。第一項是好的。

我嘗試了margin 0和padding 0無濟於事。

任何人都看到類似的東西，並知道如何解決它？

這裏是代碼，我被給了。放入一個.html並在Firefox中查看它。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<!-- InstanceBegin template="/templates/standard_menus_fixed.dwt" codeOutsideHTMLIsLocked="false" --> 
<head id="Template_Head1"><title> 
    Bereavement: key facts 
</title><link href="/WebResource.axd?d=5l5Vc4D6yAURPWhWXhJ1YxVmorTrcBTS6LeygIpuH99gHY_hxCH5iVrseffmyXJjODvXT-h-Cep60waS6UnK9oPqL7YFeDCBMOyrJ_54mXW-llvBQnPFG49p21uK3ml9R2ozACJMx6EY-iFhJJSIGm4N0WI1&amp;t=635101844810114495" type="text/css" rel="stylesheet" /><base href="http://www.rcpsych.ac.uk/" /><link href="/templates/default/css/system/system.css" type="text/css" rel="stylesheet" /><link href="/templates/default/css/system/standard.css" type="text/css" rel="stylesheet" /> 
    <!--<link href="/templates/default/css/main.css" type="text/css" rel="stylesheet" />--> 
    <!--New site styles added by JainA00 07/08/2012--> 
    <link href="/templates/default/css/newSite/global.css" type="text/css" rel="stylesheet" media="screen,projection" /><link rel="stylesheet" href="/templates/default/css/newsite/print.css" type="text/css" media="print" /> 
     <!--[if lte IE 7]> 
    <link rel="stylesheet" href="/templates/default/css/newSite/ie8.css" media="screen,projection" type="text/css" /> 
    <![endif]--> 
    <!--[if lte IE 6]> 
    <link rel="stylesheet" href="/templates/default/css/newSite/ie7.css" media="screen,projection" type="text/css" /> 
    <![endif]--> 
    <link rel="stylesheet" href="/templates/default/css/n_red.css" media="screen,projection" type="text/css" /> 
    <script type="text/javascript" src="/../../scripts/jquery-1.6.2.min.js"></script> 

    <script type="text/javascript" src="/../../scripts/jquery.overlabel.js"></script> 

    <script type="text/javascript" src="/../../scripts/jquery.hoverIntent.minified.js"></script> 

    <script type="text/javascript" src="/../../scripts/main-functions.js"></script> 


    <meta name="robots" content="canonical" /><meta name="GENERATOR" content="Immediacy .NET CMS - Licensed To : The Royal College of Psychiatrists" /><meta name="keywords" content="bereavement, grief, death, depression, antidepressants, grieving" /><meta name="description" content="Bearevement: what happens when you loose someone you love: produced by the Royal College of Psychiatrists" /><!-- MY CSS --><style media="screen" type="text/css">body{overflow-x: hidden;}#page-wrapper{background-image: url("");width:630px;left:100px;margin-left:0px;} #page-inner{  background-image: url("");width:820px;left:0px;margin-left:0px;} #top-layer em{background-image: url("");} 
    ul{width:85%; background-color:#ffcccc; margin:0; padding:0; padding-left:20px; border:none;} 
    li{width:100%; background-color:#ff0000; margin:0; padding:0; border:none;} 

    </style></head> 
<body class="mainBody"> 

<div id="top-layer"> 
    <!-- KILL TOP LAYER --> 
    <div id="page-wrapper"> 
     <div id="page-inner"> 
     <div id="page-inner"> 
      <div id="breadCrumb"> 

<!-- KILL BREADCRUMB --> </div> 
      <div id="main-layer"> 
       <div id="main-content"> 

        <div id="mainContent"> 

<h3><strong>What if I can't come to terms with it?</strong></h3> 

<ul> 
<li>You may have problems if you can't grieve properly at the time 
of your loss because of family or business commitments. Some people 
don&rsquo;t appear to grieve at all and return quickly to their normal 
life,&nbsp;but then, years later, have odd physical symptoms or 
spells of depression.</li> 
<li>If you have had a stillbirth, miscarriage or abortion, other 
people may not understand why you feel so deeply about it. This can 
make you feel very alone and low.</li> 
<li>You may start to grieve, but get stuck. The early sense of 
shock and disbelief goes on. Years may pass and still you find it 
hard to believe that the person you loved is dead.</li> 
<li>You may find that you can&rsquo;t think of anything else, perhaps 
making the room of the dead person into a shrine.</li> 
<li>Occasionally, you may feel so low that you have thoughts of 
killing yourself and may even stop eating and drinking.</li> 
<li>Bereavement can affect your physical health, with an increased 
risk of cancer and heart disease. Some older people may die very 
soon after their partner or spouse has died.</li> 
</ul> 

</body> 
<!-- InstanceEnd --> 
</html>

來源

2014-10-17 Marcus Kirsch

嗨，你可以做一個小提琴嗎？所以我們可以研究它？ – 2014-10-17 11:00:34

通過使用jsfiddle.net創建一些我們可以使用的東西，例如：http://stackoverflow.com/help/mcve – 2014-10-17 11:30:49

您的意思是在代碼中明顯減少代碼或CSS？我認爲目前大約有5個CSS文件。這不是我的工作，所以這一切都很混亂。 – 2014-10-17 12:40:18

爲了消除圓/點和李項文本之間的中灰垂直線，嘗試以下CSS樣式添加到「禮」元素：左邊框：0像素重要;！。 'li'元素的最終CSS樣式如下：

li{ 
width:100%; 
background-color:#ff0000; 
margin:0; 
padding:0; 
border:none; 
border-left: 0px !important; 
}

來源

2014-10-29 16:56:35 Aurel76

CSS ul li 2nd和以下列表項目有灰色垂直線

回答

相關問題