html - 在列表下用 HTML/CSS 制作一条垂直线

Question

我正在尝试复制我在 Illustrator 中所做的设计(我知道，哈哈，我设计了一些我不知道如何制作的东西!)

所以我制作了一个底部带有边框的水平 HTML 列表。我将尝试在视觉上演示它。

概览销售设置

---

每个标题也带有下划线(概述、销售、设置)，我希望在每个单词的下划线和父 div 的底部边框之间有一条垂直连接线。

到目前为止，我已经得到了每个标题的下划线(使用 border bottom 而不是下划线)以及父 div 的底部边框。

我只是无法解决的是如何在每个列表项下放置一条垂直线。我尝试使用换行符，但它最终 reshape 了整个列表。

任何想法/设计都会很棒

提前致谢! - 灰

这是我的图片保管箱的链接，因为我的代表太低无法添加图片!

https://dl.dropboxusercontent.com/u/58549715/Screen%20Shot%202015-07-21%20at%2012.13.51.png

代码

<div class="top-menu-two">
 <div class="top-menu-two-controls">
    <ul>
    <li>
        <object type="image/svg+xml" data="MainOverviewColor.svg" class="svg" id="yolo"></object> 
        <span class="menuText" id="topMenuTwoOverview">Overview</span>
    </li>
    <li class="not-active">
        <object type="image/svg+xml" data="MainAgentsColor.svg" class="svg"></object> 
        <span class="menuText" id="topMenuTwoAgents">Agents</span>
    </li>
    <li class="not-active">
        <object type="image/svg+xml" data="MainSalesColor.svg" class="svg"></object> 
        <span class="menuText" id="topMenuTwoSales">Sales</span>
    </li>
    <li class="not-active">
        <object type="image/svg+xml" data="MainNewQuotationsColor.svg" class="svg"></object> 
        <span class="menuText" id="topMenuTwoNewQuotations">New Quotations</span>
    </li>
    </ul>
</div>

.top-menu-two{
display: inline-block;
width: 100%;
padding: 1% 0% 0% 1%;
float: right;
border-bottom: solid 1px rgb(224,34,80);
}

.top-menu-two-controls{
float: left;
display: inline-block;
font-family: 'HelveticaNeue-Bold';
position: relative;
top: 32%;
margin-left: 20px;
}  

.top-menu-two-controls ul{
padding-left: 0;
font-family: 'HelveticaNeue';
list-style-type: none;
font-size: 20px;
}
.top-menu-two-controls li{
display: inline;
margin-right: 10px;
} 

#topMenuTwoOverview{
border-bottom: solid 3px rgb(224,34,80);
}

#topMenuTwoAgents{
border-bottom: solid 3px rgb(64,143,221);
}

#topMenuTwoSales{
border-bottom: solid 3px rgb(224,224,36);
}

#topMenuTwoNewQuotations{
border-bottom: solid 3px rgb(34,127,20);
}

.svg{
display: inline;
width: 30px;
height: 30px;
margin-right: 10px;
}

.menuText{
position: relative;
top: -8px;
}

Answer 1

我完全在猜测你的 html 结构，因为你没有提供它，但如果它像一个列表(因为它似乎是一个导航)那么你可以使用 after 元素来创建底线:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid grey;
}
ul li {
  display: inline-block;
  padding: 5px 5px 10px 5px;
  position: relative;
  font-weight: bold;
}
ul li:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 8px;
  border-left: 1px solid grey;
}

<ul>
  <li>Overview</li>
  <li>Sales</li>
  <li>Settings</li>
</ul>

更新

鉴于您的代码，我会首先更改它，以便 ID 位于 li 而不是 span 上，然后您可以使用以下内容:

.top-menu-two {
  display: inline-block;
  width: 100%;
  padding: 1% 0% 0% 1%;
  float: right;
  border-bottom: solid 1px rgb(224, 34, 80);
}
.top-menu-two-controls {
  display: inline-block;
  font-family: 'HelveticaNeue-Bold';
  position: relative;
  top: 32%;
  margin-left: 20px;
}
.top-menu-two-controls ul {
  padding: 0;
  margin: 0;
  font-family: 'HelveticaNeue';
  list-style-type: none;
  font-size: 20px;
}
.top-menu-two-controls li {
  display: inline-block;
  margin: 0 10px;
  padding-bottom: 10px;
  line-height: 1;
}
.top-menu-two-controls li .menuText:after {
  content: '';
  display: block;
  position: absolute;
  bottom: -14px;
  left: 50%;
  height: 12px;
  border-left: 1px solid grey;
}
.top-menu-two-controls li.not-active .menuText:after {
    display:none;
}
.top-menu-two-controls .menuText {
  position:relative;
  border-bottom: 3px solid grey;
}
#topMenuTwoOverview .menuText:after,
#topMenuTwoOverview .menuText {
  border-color: rgb(224, 34, 80);
}
#topMenuTwoAgents .menuText:after,
#topMenuTwoAgents .menuText {
  border-color: rgb(64, 143, 221);
}
#topMenuTwoSales .menuText:after,
#topMenuTwoSales .menuText {
  border-color: rgb(224, 224, 36);
}
#topMenuTwoNewQuotations .menuText:after,
#topMenuTwoNewQuotations .menuText {
  border-color: rgb(34, 127, 20);
}
.svg {
  display: inline;
  width: 30px;
  height: 30px;
}
.menuText {
  position: relative;
  padding-bottom: 3px;
  top: -8px;
}

<div class="top-menu-two">
  <div class="top-menu-two-controls">
    <ul>
      <li id="topMenuTwoOverview">
        <object type="image/svg+xml" data="MainOverviewColor.svg" class="svg" id="yolo"></object>
        <span class="menuText">Overview</span>
      </li>
      <li id="topMenuTwoAgents" class="not-active">
        <object type="image/svg+xml" data="MainAgentsColor.svg" class="svg"></object>
        <span class="menuText">Agents</span>
      </li>
      <li id="topMenuTwoSales" class="not-active">
        <object type="image/svg+xml" data="MainSalesColor.svg" class="svg"></object>
        <span class="menuText">Sales</span>
      </li>
      <li id="topMenuTwoNewQuotations" class="not-active">
        <object type="image/svg+xml" data="MainNewQuotationsColor.svg" class="svg"></object>
        <span class="menuText">New Quotations</span>

      </li>
    </ul>
  </div>
</div>