横並びメニューの区切り線を入れて等間隔にしたい
解決したいこと
横並びメニューの区切り線を入れて等間隔にしたい
例）
簡単なホームページの作成を行なっている最中で躓きました。教授願いたいです。
本来のホームページの画像
現在のホームページの画像
該当ソースコードHTML
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="base.css">
</head>
<body>
<header>
<div class = "heading">
<img src = "images/logo_icon.png" alt = "トップアイコン" class = "top_icon_image">
<img src = "images/logo_name.png" alt = "ロゴネーム" class = "name_image">
</div>
</header>
<div class = "upper-contents">
<ul class = "heading-contents">
<li> </li>
<li>VISION</li>
<li>SERVICE</li>
<li>COMPANY</li>
<li> </li>
</ul>
</div>
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
該当するソースコード
header{
height: 50px;
padding: 5px 30px 5px 0px;
}
.heading{
display: flex;
width: 20%;
margin-left: 20%;
height: 70px;
}
.upper-contents {
padding: 30px 0px 30px 0px;
}
.heading-contents {
display: flex;
justify-content: space-around;
align-items: center;
font-family: "Times New Roman";
color: white;
height: 30px;
}
li {
width:100%;
padding: 10px;
border:1px solid white;
background-color: #20B2AA;
}
### 自分で試したこと
https://www.webernote.net/webcreate/menu-css.html
YouTubeで調べたりしてやってみたが、思った通りにならなかったため、どなたかお願い致します。
0
