在列表下的HTML / CSS中創建垂直線

Question

我正在嘗試復制在Illustrator中所做的設計（我知道，哈哈，我已經設計了一些我不知道如何制作的東西！）

因此，我制作了一個HTML列表，水平放置在底部帶有邊框。 我將嘗試以可視方式進行演示。

概述銷售設置

---

每個標題也都帶有下划線（概述，銷售，設置），我希望在每個單詞的下划線和父div的底部邊框之間得到一條連接的垂直線。

到目前為止，我已經獲得了每個標題的下划線（使用邊框底部而不是下划線）以及父div的底部邊框。

我無法解決的是如何在每個列表項下放置一條垂直線。 我嘗試使用換行符，但最終會重塑整個列表。

任何想法/設計都很棒

提前致謝！ -灰

這是我照片的保管箱的鏈接，因為我的代表太低而無法添加照片！

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> 

Answer 2

您可以使ul容器具有border-bottom屬性。

在每個li ，您可以在text下方使用margin auto或在li上進行： div偽造:after的div ，其透明性， border-left/border-right高度和固定高度以及1px width以及單擊其中的一些時， javascript / jquery，給出顏色。