在li的中心创建垂直线

Question

我创建了一个包含ul和li的html页面，以显示一些链接并为li设置一些背景颜色。现在我想在li上添加垂直线。

当我尝试设置图像时，它将如图1 所示，但我希望它如 figure 2 所示。

图1

图2

到目前为止我尝试过：

ul#sitemap1 {
  list-style: none;
}

ul#sitemap1 li a {
  background-color: #002163;
  color: white;
  padding: 10px;
  text-decoration: none;
  width: 200px;
  display: block;
  margin: 10px;
  font-weight: bold;
}

#sitemap1 li {
  clear: left !important;
  margin-top: 0px !important;
  padding: 10px !important;
  background: url('/Images/ConnectLine.JPG') no-repeat !important;
  float: inherit;
}

ul#sitemap1 li a:hover {
  background-color: Orange;
}

ul#sitemap2 {
  list-style: none;
}

ul#sitemap2 li a {
  background-color: #002163;
  color: white;
  padding: 10px;
  text-decoration: none;
  width: 200px;
  display: block;
  margin: 10px;
  font-weight: bold;
}

ul#sitemap2 li a:hover {
  background-color: Orange;
}

ul#sitemap3 {
  list-style: none;
}

ul#sitemap3 li a {
  background-color: #002163;
  color: white;
  padding: 10px;
  text-decoration: none;
  width: 200px;
  display: block;
  margin: 10px;
  font-weight: bold;
}

ul#sitemap3 li a:hover {
  background-color: Orange;
}

<h1>Innovations</h1>

<ul id="sitemap1">
  <a href="https://Home.aspx" style="font-weight:bold;text-decoration:none">Home</a>
  <li><a href="https://Services.aspx">Services</a></li>
  <li><a href="https:///OC.aspx">Organizational Change</a></li>
  <li><a href="https://kit.aspx">kit</a></li>
  <li><a href="https://Sheets.aspx">Sheets</a></li>
</ul>

<ul id="sitemap2">
  <a href="https://Engagement.aspx" style="font-weight:bold; text-decoration:none">Engagement</a>
  <li><a href="https://Ideas.aspx">Ideas</a></li>
  <li><a href="https://WS.aspx">WorkSmart</a></li>
</ul>

<ul id="sitemap3">
  <a href="https://Links.aspx" style=" font-weight:bold; text-decoration:none">Related Links</a>
  <li><a href="https://Gotime.aspx">GO-TIME</a></li>
</ul>

Answer 1

1. 我建议删除CSS中的id，不需要复制相同的CSS，只需引用ul标记即可。

2. 您可以使用:after伪元素来创建该行。

3. 使用:last-child删除最后一项的行。

＆＃13;
＆＃13;
ul {
  list-style: none;
}
ul li {
  width: 220px;
  position: relative;
  margin-bottom: 20px;
}
ul li:after {
  content: "";
  position: absolute;
  top: 90%;
  left: 50%;
  height: 25px;
  background: black;
  width: 4px;
  border-radius: 5px;
  border: 2px solid white;
  z-index: 100;
}
ul li:last-child:after {
  display: none;
}
ul li a {
  background-color: #002163;
  color: white;
  padding: 10px;
  text-decoration: none;
  width: 200px;
  display: block;
  margin: 10px;
  font-weight: bold;
}
ul li a:hover {
  background-color: Orange;
}
＆＃13;
<h1>Innovations</h1>
<ul id="sitemap1"><a href="https://Home.aspx" style="font-weight:bold;text-decoration:none">Home</a>
  <li><a href="https://Services.aspx">Services</a>
  </li>
  <li><a href="https:///OC.aspx">Organizational Change</a>
  </li>
  <li><a href="https://kit.aspx">kit</a>
  </li>
  <li><a href="https://Sheets.aspx">Sheets</a>
  </li>
</ul>
<ul id="sitemap2"><a href="https://Engagement.aspx" style="font-weight:bold; text-decoration:none">Engagement</a>
  <li><a href="https://Ideas.aspx">Ideas</a>
  </li>
  <li><a href="https://WS.aspx">WorkSmart</a>
  </li>
</ul>
<ul id="sitemap3"><a href="https://Links.aspx" style=" font-weight:bold; text-decoration:none">Related Links</a>
  <li><a href="https://Gotime.aspx">GO-TIME</a>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

Answer 2

您可以在::after

的a子项中使用伪元素li

请注意，您只能li作为ul的直接子项。否则它是无效的HTML

我调整了CSS，删除了重复的属性。

ul {
  list-style: none;
  margin-top: 30px
}
ul li a {
  background-color: #002163;
  color: white;
  padding: 10px;
  text-decoration: none;
  width: 200px;
  display: block;
  margin: 10px;
  font-weight: bold;
  position: relative
}
ul li a::after {
  position: absolute;
  top: 100%;
  left: 50%;
  background: black;
  width: 5px;
  height: 100%;
  content: ""
}
ul li:last-of-type a::after {
  background: transparent;
  height: 0
}
ul li a:hover {
  background-color: Orange;
}

<div>
  <h1>Innovations</h1>

  <ul id="sitemap1">
    <li><a href="https://Home.aspx">Home</a>
    </li>
    <li><a href="https://Services.aspx">Services</a>
    </li>
    <li><a href="https:///OC.aspx">Organizational Change</a>
    </li>
    <li><a href="https://kit.aspx">kit</a>
    </li>
    <li><a href="https://Sheets.aspx">Sheets</a>
    </li>

  </ul>
  <ul id="sitemap2">
    <li><a href="https://Engagement.aspx">Engagement</a>
    </li>
    <li><a href="https://Ideas.aspx">Ideas</a>
    </li>
    <li><a href="https://WS.aspx">WorkSmart</a>
    </li>
  </ul>
  <ul id="sitemap3">
    <li><a href="https://Links.aspx">Related Links</a>
    </li>
    <li><a href="https://Gotime.aspx">GO-TIME</a>
    </li>
  </ul>

Answer 3

试试这个，你可以尝试使用站点地图1和3。

ul#sitemap2 li::after{
content:'';
border:3px solid #111;
height:50px;
margin-left:110px;
}