如何在li元素中添加全高度的左边框？

Question

我正在创建一个简单的菜单，但我在边框中遇到了问题。我必须在li元素中显示完整的左边框。你能帮我吗？

我得到这样的输出。 我需要像这样的输出。

＆＃13;

＆＃13;

ios

＆＃13;

body{
	margin: 0;
	padding: 0;
}
.dash-menu
{
background-color: #763E9B;
width: 100%;
min-height: 100px;
color: #fff;
}
.dash-menu h2
{
	float: left;
}
.dash-header ul
{
	float:right;
	list-style: none;
}
.dash-header li{
	float: left;
	margin: 20px;
}
.dash-header li:before{
content: '|';
color: #A569BD;
display: inline-block;
border-left: 3px solid yellow; 
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

我把它放在一起非常快，所以我确信它可以以更优雅的方式完成。 https://jsfiddle.net/3tqxogLk/

我将border-left放在li本身而不是：之前，所以我添加的所有代码都在这里：

.dash-header li{
  float: left;
  height: 20px;
  margin-top: -20px;
  padding-top: 40px;
  padding-bottom: 44px;
  border-left: 3px solid yellow; 
}

Answer 2

如果不需要使用表格（我认为它不适用于菜单），我喜欢使用flex，因为我发现它更具响应性，更容易定制和控制。我经常将flex选项设置为类并根据需要应用它们（即.justify-between＆amp; .justify-around）

body{
  margin: 0;
  padding: 0;
}

.dash-menu{
  display:flex;
  flex-direction:row; /* Flex is row by default, so this is just FYI */
  justify-content: space-between;
  width:100%;
  background:#763E9B;
  color:#FFFFFF;
}

.dash-menu h2{
  padding:0 10px;
}

.dash-menu ul{
  display:flex;
  align-items:center;
  padding:0;
  margin:0;
}

.dash-menu ul li{
  display:flex;
  align-items:center;
  min-height:100%;
  padding:0 10px;
  list-style-type: none;
  border-left: 3px solid yellow; 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="dash-menu">
  <h2>Hi, Welcome back</h2>
  <ul>
    <li>Menu1</li>
    <li>Menu2</li>
    <li>Menu3</li>
    <li><i class="fa fa-bars" aria-hidden="true"></i></li>
  </ul>
  <img src="">
</div><!--dash-menu-->

Answer 3

您可以尝试以下两种方法：

{li> display: table-cell; <li>
1. 将height: 100%;提供给您的正文/ html和<ul>

基本上，您的<li>并未消耗其父级的整个高度。上述两种情况都可以实现。