li要素にフルハイトの左ボーダーを追加するにはどうすればよいですか？

Question

私は簡単なメニューを作成していますが、国境に問題があります。 li要素に完全な左境界線を表示する必要があります。これで私を助けてください。

このように出力されています。 このような出力が必要です。

body{ 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
.dash-menu 
 
{ 
 
background-color: #763E9B; 
 
width: 100%; 
 
min-height: 100px; 
 
color: #fff; 
 
} 
 
.dash-menu h2 
 
{ 
 
\t float: left; 
 
} 
 
.dash-header ul 
 
{ 
 
\t float:right; 
 
\t list-style: none; 
 
} 
 
.dash-header li{ 
 
\t float: left; 
 
\t 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"> 
 
\t <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-->

Answer 1

私はこれをかなり素早くまとめました。もっとエレガントなやり方でできると確信しています。 https://jsfiddle.net/3tqxogLk/

Iは、Li自体に国境左を置くのではなく：私はそうでない（

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

Answer 2

あなたはこれらの2つの修正を試すことができます。

1. display: table-cell;を<li>
2. にあなたの体/ HTMLにし、基本的にはあなたの<ul>

にheight: 100%;を与えます、 <li>は親の高さ全体を消費していません。上記の2つのどちらかを実行する必要があります。

Answer 3

テーブルを使用する必要がない場合：前に、私は追加されたすべてのコードはここにありますそれがメニュー用だと思う）、私はフレックスを使うのが好きです。なぜなら、レスポンスが良く、カスタマイズやコントロールが容易だからです。私は、多くの場合、返信用

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