目的
HTML でものを作っている中で、つまづいた内容についての備忘録。
逐次更新の予定。
備忘録
横並びのメニューバーをヘッダ部分につくりたい
header 部分にリストを作成する。 style でリストを横並びにする。
index.html
<body>
<header>
<ul>
<li><a class="btn_menu" href="contents/profile_en.html" target="main">Profile</a></li>
<li><a class="btn_menu" href="contents/research_en.html" target="main">Research</a></li>
<li><a class="btn_menu" href="contents/publication_en.html" target="main">Publication</a></li>
<li><a class="btn_menu" href="contents/distribution_en.html" target="main">Distribution</a></li>
</ul>
</header>
</body>
display: inline-block; のところで横並びを定義してる。
style.css
header{
z-index: auto;
height: fit-content;
width: 100%;
position: relative;
top: auto;
background-color: dodgerblue;
text-align: center;
z-index: auto;
}
ul {
overflow: hidden;
list-style: none;
margin: 0 auto;
z-index: auto;
}
ul li {
display: inline-block;
padding: 10px 20px 10px 20px;
}