1
フレックスボックスを使用して固定メニューを作成しようとしています。ナビゲーションバーに2つのdivを作成しました。最初にロゴと2番目のメニュー(display:flex
プロパティ付き)が含まれている必要があります。私は問題を抱えています、私は私のメニューのli要素をpostionしたいとき。私は水平メニューが必要ですが、私がjustify-content:space-between
を追加すると、私の最初の要素はメニューのdivの左端に位置するはずですが、それにはわずかなマージンがあり、理由はわかりません。あなたは余裕追加する必要がフレックスボックスを使用して水平メニューを配置する
https://jsfiddle.net/4Lmu08yc/
header {
height:100vh;
background-color:yellow;
width:100vw;
max-width:100%;
}
.navbar {
width:100vw;
background-color:grey;
height:7vh;
max-width:100%;
position:fixed;
border-bottom:5px solid white;
z-index:2;
}
.flex_row {
display:flex;
flex-direction:row;
}
.container{
height:100%;
width:100vw;
max-width:100%;
background-color:green;
display:flex;
}
#logo {
height:100%;
background-color:white;
flex-grow:1;
}
#menu {
height:100%;
background-color:yellow;
flex-grow:1;
}
#menu ul {
list-style-type:none;
justify-content:flex-start;
align-content:flex-end;
}
#menu ul li {
border:1px solid black;
line-height:40px;
}
<header>
<div class="container">
<div class="navbar flex_row">
<div id ="logo"></div>
<div id ="menu">
<ul class="flex_row">
<li><a href="#">text1</a></li>
<li><a href="#">text2</a></li>
<li><a href="#">text3</a></li>
<li><a href="#">text4</a></li>
</ul>
</div>
</div>
</div>
</header>
完全なコードを共有し、正確にどのようなエラーが発生しているかを言及してください。 – JeetDaloneboy
マージンとパディングをゼロにすることはできません - https://jsfiddle.net/bwpg01b0/1/ –