我创建了一个带有 ul
和 li
的 html 页面来显示一些链接并为 li
设置一些背景颜色'秒。现在我想在 li
上添加垂直线。
当我尝试设置图像时,它出现在图 1 中,但我希望它像图 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>
最佳答案
我建议从 CSS 中删除 id,无需复制相同的 CSS,只需引用
ul
标签即可。您可以使用
:after
伪元素来创建行。使用
:last-child
删除最后一项的行。
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;
}
<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>
关于html - 在 li 的中心创建垂直线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37883544/