概述销售设置

每个标题也有下划线（概述，销售，设置），我喜欢的是在每个单词的下划线和父div的下边界之间建立一个小的连接垂直线。

到目前为止，我已经获得了每个标题的下划线（使用边框底部没有下划线）以及父div的底部边框。

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

任何想法/设计都会很棒

提前致谢！ - Ash

以下是我的Dropbox for pic的链接，因为我的代表太低而无法添加图片！

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元素来创建底线：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

<强>更新

鉴于您的代码，我首先会更改代码，因此ID位于li而不是span，然后您可以使用以下代码：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用ul属性制作border-bottom容器。

在每个li内，您可以在文字下方div margin auto或:after使用li，1px width使用透明度和固定高度border-left/border-right describe("Q Service Test", () => { var q: ng.IQService; var rootScope: ng.IRootScopeService; beforeEach(inject(($q, $rootScope) => { q = $q; rootScope = $rootScope; })); it("Caught exceptions are handled properly", () => { var state = 'ok'; q.when(1) .then(() => { throw new Error("test exception"); }) .catch(() => { state = 'error'; }); rootScope.$digest(); expect(state).toBe('error'); }); }); 1}} {{1}}，当点击其中一些时，使用javascript / jquery，给出颜色。

在列表下的HTML / CSS中创建一条垂直线

概述销售设置

代码

2 个答案: