如何在li元素中添加左边框并使其高度与li元素相同？

Question

我正在创建一个简单的菜单，但是在边框方面遇到了问题。我需要在li元素中显示完整的左边框。你能帮我解决这个问题吗？

I am getting output like this. I need output like this.

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

<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>
<div class="dash-header">
<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-header-->
</div><!--dash-menu-->

- Naren Verma

Answer 1

我很快就把这个东西放在一起了，所以我相信它可以用更优雅的方式完成。我把border-left放在li本身而不是:before上，所以我添加的所有代码都在这里：https://jsfiddle.net/3tqxogLk/

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

- TristanAG

---

非常正确，Tristan。这对我有用。我还需要一个帮助，我在dash-menu类中添加了min-height:100px。这样可以吗？因为如果我删除它，我就无法获得背景颜色。 - Naren Verma

如果它能工作，那很酷！但我不太明白为什么min-height:100px会决定是否获取背景颜色。 - TristanAG

Answer 2

如果不需要使用表格（我认为菜单不需要），我喜欢使用flex，因为我觉得它更具响应性，更易于定制和控制。我经常将flex选项设置为类，并根据需要应用它们（例如，.justify-between & .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-->

- avengefulghost

Answer 3

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

1. 在 <li> 上添加 display: table-cell;
2. 给您的 body/html 和 <ul> 添加 height: 100%;

基本上，您的 <li> 没有占用其父元素的整个高度。以上两种方法中的任何一种都应该解决这个问题。

- Shobhit Srivastava

---

感谢您的回复，Shobhit先生。但是仍然存在相同的问题，没有任何变化。 - Naren Verma