我有一个弹性导航,它包裹在左侧,部分离开屏幕。有经验的人是否知道可能导致这种情况的原因?我无法弄清楚为什么会这样做。
header {
background-color: rgba(255, 165, 0, .8);
border-bottom: 12px solid black;
display: flex;
flex-flow: row wrap;
align-content: center;
}
header h1 {
text-align: center;
margin: 0;
padding: 15px;
text-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
border: 8px solid black;
}
header h1,
nav a {
font-weight: 700;
font-family: arial;
}
header nav {
display: none;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
text-align: center;
margin: 1px;
border: 1px solid white;
border-radius: 15px;
}
a {
text-decoration: none;
}
a:visited,
a,
h1 {
color: white;
}
@media screen and (min-width: 400px) {
header {
height: 120px;
display: flex;
justify-content: space-between;
}
header h1 {
margin: 0 0 0 8%;
font-size: 2em;
align-self: flex-start;
white-space: nowrap;
}
header nav {
display: block;
align-self: flex-end;
}
nav ul {
display: flex;
justify-content: flex-end;
margin: 0 8% 0 0;
}
nav ul li {
border-radius: 8px;
padding: 5px;
margin: 4px 1%;
font-size: 1.5rem;
}
.characters:hover {
position: relative;
border-radius: 8px 8px 0 0;
}
.drop-menu {
position: absolute;
display: none;
top: 38px;
white-space: nowrap;
left: 0;
background-color: rgba(255, 165, 0, .8);
border: 1px solid rgba(0, 0, 0, .02);
box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, .3);
}
.characters:hover .drop-menu {
display: block;
}
.drop-menu li {
margin: 0;
border-radius: 0;
}
footer nav {
display: none;
}
}
<header>
<h1>Seraph Chronicles</h1>
<nav>
<ul class="main-nav">
<li class="main-nav-item"><a href="index.html">Home</a></li>
<li class="main-nav-item"><a href="about.html">About</a></li>
<li class="main-nav-item characters">
<a href="characters.html">Characters</a>
<ul class="drop-menu">
<li><a href="ethanClarke.html">Ethan Clarke</a></li>
<li><a href="serenaKiriaga.html">Serena Kiriaga</a></li>
<li><a href="MarcusFlynn.html">Marcus Flynn</a></li>
<li><a href="EmilyAshdown.html">Emily Ashdown</a></li>
<li><a href="MilesWest.html">Director Miles West</a></li>
</ul>
</li>
<li class="main-nav-item"><a href="auther.html">Author</a></li>
</ul>
</nav>
</header>
答案 0 :(得分:3)
不要在弹性项目边距上使用百分比。使用其他单位,例如px
或em
。
当您将主容器(.header
)设为灵活容器时,其子容器将成为弹性项目。
这两个孩子:h1
和nav
(下面添加红色边框)
每个导航项(li
)都有一个水平边距(每边1%)。
nav ul li{
border-radius: 8px;
padding: 5px;
margin: 4px 1%;
font-size: 1.5rem;
}
这会导致它们溢出容器。
然后,因为容器有justify-content: flex-end
,所以项目与容器的右边缘对齐。这意味着溢出发生在左侧(见上图)。
在较小的屏幕上,nav元素包裹到标题的左边缘,溢出的项目不在视图中:
如果切换到justify-content: flex-start
,则项目会在右侧溢出。
但 真正的问题 实际上是这样的:
为什么
ul
容器不能扩展以容纳li
个孩子?
答案似乎是使用水平边距的百分比。
nav ul {
display: flex;
justify-content: flex-end;
margin: 0 8% 0 0;
}
nav ul li {
border-radius: 8px;
padding: 5px;
margin: 4px 1%;
font-size: 1.5rem;
}
容器未在边缘识别此单位,因此不会扩展。
请注意flexbox spec recommends against using percentage margins and padding on flex items。
4.2. Flex Item Margins and Paddings
作者应避免在flex上使用填充或边距的百分比 完全是项目,因为他们将在不同的浏览器中获得不同的行为。
一旦你切换到边距上的非百分比单位,一切似乎都有效。
答案 1 :(得分:0)
更改CSS中的以下内容:
nav ul{
display: flex;
/* justify-content: flex-end; */
margin: 0 8% 0 0;
}
答案 2 :(得分:0)
只需从媒体查询部分中的justify-content: flex-end;
规则中删除nav ul
:
header {
background-color: rgba(255, 165, 0, .8);
border-bottom: 12px solid black;
display: flex;
flex-flow: row wrap;
align-content: center;
}
header h1 {
text-align: center;
margin: 0;
padding: 15px;
text-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
border: 8px solid black;
}
header h1,
nav a {
font-weight: 700;
font-family: arial;
}
header nav {
display: none;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
text-align: center;
margin: 1px;
border: 1px solid white;
border-radius: 15px;
}
a {
text-decoration: none;
}
a:visited,
a,
h1 {
color: white;
}
@media screen and (min-width: 400px) {
header {
height: 120px;
display: flex;
justify-content: space-between;
}
header h1 {
margin: 0 0 0 8%;
font-size: 2em;
align-self: flex-start;
white-space: nowrap;
}
header nav {
display: block;
align-self: flex-end;
}
nav ul {
display: flex;
margin: 0 8% 0 0;
}
nav ul li {
border-radius: 8px;
padding: 5px;
margin: 4px 1%;
font-size: 1.5rem;
}
.characters:hover {
position: relative;
border-radius: 8px 8px 0 0;
}
.drop-menu {
position: absolute;
display: none;
top: 38px;
white-space: nowrap;
left: 0;
background-color: rgba(255, 165, 0, .8);
border: 1px solid rgba(0, 0, 0, .02);
box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, .3);
}
.characters:hover .drop-menu {
display: block;
}
.drop-menu li {
margin: 0;
border-radius: 0;
}
footer nav {
display: none;
}
}
<header>
<h1>Seraph Chronicles</h1>
<nav>
<ul class="main-nav">
<li class="main-nav-item"><a href="index.html">Home</a></li>
<li class="main-nav-item"><a href="about.html">About</a></li>
<li class="main-nav-item characters">
<a href="characters.html">Characters</a>
<ul class="drop-menu">
<li><a href="ethanClarke.html">Ethan Clarke</a></li>
<li><a href="serenaKiriaga.html">Serena Kiriaga</a></li>
<li><a href="MarcusFlynn.html">Marcus Flynn</a></li>
<li><a href="EmilyAshdown.html">Emily Ashdown</a></li>
<li><a href="MilesWest.html">Director Miles West</a></li>
</ul>
</li>
<li class="main-nav-item"><a href="auther.html">Author</a></li>
</ul>
</nav>
</header>