为什么菜单项不在div的右侧？

我想要一个菜单，在左侧有一个标志，菜单项在右侧，我使用flexbox为此，但它不工作。菜单项是坚持标志。你知道问题在哪里吗？为什么菜单项不在div的右侧？

这是HTML：

<div class="container"> 
    <header class="Header content"> 
    <h1 class="title"><a href="">LOGO</a></h1> 
    <ul class="main_nav"> 
     <li><a href="">Item 1</a></li> 
     <li><a href="">Item 2</a></li> 
    </ul> 
    <div class="clear"></div> 
    </header> 
</div>

例如：https://jsfiddle.net/adwkkvt6/

CSS

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 

ul { 
    list-style: none; 
    margin:0; 
    padding: 0; 
} 

.container { 
    float: left; 
    width: 100%; 
} 

.content { 
    width: 94%; 
    margin: 0 auto; 
} 


.Header, .main_nav{ 
    display: flex; 
} 

.title a{ 
    color:green; 
    font-size: 0.85em; 
} 

.main_nav li{ 

    padding: 0 15px; 

} 

.main_nav{ 
    background-color: red; 
    justify-content: space-between; 
    align-items: center; 

} 

.main_nav a{ 
    font-weight: 700; 
    font-size: 0.85em; 
    color:gray; 
}

来源

2017-07-28 Jakj

没有弯曲，可以给浮动和固定。 https://jsfiddle.net/adwkkvt6/2/ –

我解释了我的答案bettet低于 – LKG

添加此

.title{ 
    flex:1 0 0; 
}

标题是一个孩子，所以你必须给空间马赫如何占据父div中使用flex:1 0 0获得空间的标志。

flex:1 0 0是 -

flex-grow:1; 
flex-shrink:0; 
flex-basis:0;

更多柔性visit信息。

Updated fiddle link

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
.content { 
 
    width: 94%; 
 
    margin: 0 auto; 
 
} 
 

 
.Header, 
 
.main_nav { 
 
    display: flex; 
 
} 
 

 
.title { 
 
    flex: 1 0 0; 
 
} 
 

 
.title a { 
 
    color: green; 
 
    font-size: 0.85em; 
 
} 
 

 
.main_nav li { 
 
    padding: 0 15px; 
 
} 
 

 
.main_nav { 
 
    background-color: red; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
.main_nav a { 
 
    font-weight: 700; 
 
    font-size: 0.85em; 
 
    color: gray; 
 
}

<div class="container"> 
 
    <header class="Header content"> 
 
    <h1 class="title"><a href="">LOGO</a></h1> 
 
    <ul class="main_nav"> 
 
     <li><a href="">Item 1</a></li> 
 
     <li><a href="">Item 2</a></li> 
 
    </ul> 
 
    <div class="clear"></div> 
 
    </header> 
 
</div>

来源

2017-07-28 14:19:10 LKG

感谢您的回答，它的工作原理。但是，flex-grow 1为徽标获取空间，但菜单如何向右移动？ – Jakj

检查我只为其分配'flex-grow'的徽标div，因为它不是您的导航，因此它需要尽可能多的宽度。所以你的logo div推动导航到右边。如果您将'flex-grow'分配给导航，它将占用您父级div的50％，其余50％将占用logo div。 – LKG

如果删除<div class="clear"></div>，您可以使用justify-content: space-between像

.Header, .main_nav{ 
display: flex; 
justify-content: space-between; 
}

来源

2017-07-28 14:18:19

upvote for'clear'！好点子！ – Laszlo

感谢您的回答。但是，如果您可以检查此“https://jsfiddle.net/adwkkvt6/5/”，则菜单项不在.content div的右侧。你知道为什么吗？ – Jakj

谢谢，它的作品！ – Jakj

您必须指定Flexbox的项目定位：

.Header, .main_nav{ 
    display: flex; 
    justify-content: space-between; 
}

的justify-content默认值是flex-start其推动各个项目的Flexbox的左侧。

来源

2017-07-28 14:18:58 Laszlo

为什么菜单项不在div的右侧？

回答

相关问题