タイトルを左端、グローバルメニューを右端に寄せたいのですが、うまくいきません。
PC画面ですと、中央あたりにいて、横幅がPCより広いモニター画面だと左のほうに寄っています。
画面サイズが変わってもメニューが同じ配置にあるようにする方法を教えていただきたいです。
CSSの●は※です。
やってみたこと
display: flex;
justify-content: center;
align-items: center;
list-style: none;
justify-content :flex-end;
また、
display: inline-block;
float: left;
よろしくお願いいたします。
HTML
<body> <header> <h1>○○○ <br> <small class="subheading">○○○</small> </h1> <nav> <ul> <li><a href="#contA">○○○</a></li> <li><a href="#contB">○○○</a></li> <li><a href="#contC">○○○</a></li> <li><a href="#contD">○○○</a></li> <li><a href="#contE">○○○</a></li> </ul> </nav> </header> </body>CSS
html,body{
height:100%;
}
- {
margin: 0;
padding: 0;
}
header {
background-color: #BAE3F9;
color: black;
display: flex;
width: 100%;
align-items: left;
}
header ul {
overflow: hidden;
list-style:none;
display: flex;
align-items: center;
position: relative;
}
header ul li {
text-align:center;
flex-grow: 1.5;
padding: 0 40px;
margin-top:40px;
font-size:15px;
display: inline-block;
}
ul li a:hover {
color:#595757;
}
header a {
font-weight: bold;
}
body {
width: 100%;
margin: 0 auto;
padding: auto;
background-color :white;
display: block;
}
h1 {
padding-top:10px;
padding-left: 20px;
font-size: 20px;
line-height: 2em;
padding-right: 20px;
}
回答2件
あなたの回答
tips
プレビュー