Question

我的nav中的两个链接按钮都有长名称，即使（据我所知），它们也会被文字包裹并变成两条线条。什么都没有阻止它们或nav越来越大。我错过了什么吗？

代码很长，因此您可能更乐意查看codepen而不是阅读此处。它已经很久了，因为我担心在我的全球风格中我忽略了一些东西，或者我的媒体查询更改应该归咎于这个错误。

编辑：这个答案很简单。我误解了选择器的优先顺序。我认为媒体查询优先于所有内容（内联除外）。所以我没有意识到我的媒体查询中的nav a规则没有覆盖我的基本CSS中的nav > section > a。关于始终尊重CSS选择器优先级的好教训。

HTML

<section>
    <nav>
        <a id="NSFW_deactivateFilter" onClick="worksafeOff()" href="#">Worksafe Mode: On</a>
        <h2 onClick="showMenu()">Category Filters</h2>
        <div></div>
        <section id="nav_Orientation">
              <a id="Horizontals" href="#">Horizontals</a>
              <a id="Verticals" href="#">Verticals</a>
        </section>
        <div></div>
        <section id="nav_Category">
              <a id="Biltmore" href="#">Biltmore</a>
              <a id="Commercial" href="#">Commercial / Product</a>
              <a id="Fashion" href="#">Fashion &amp; Glamour</a>
              <a id="Invocation" href="#">Invocation</a>
              <a id="NewOrleans" href="#">New Orleans</a>
        </section>
    </nav>
</section>

CSS

/** GLOBAL **/
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: inherit;
    font-size: 16px;
    font-style: inherit;
    font-weight: 400;
    line-height: 1em;
    margin: 0 auto;
    padding: 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    z-index: 1;
}
a {
    text-decoration: underline;
}
body {
    background-color: #444;
    color: #ccc;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-style: normal;
}
body > section {
    background-color: #333;
    width: 100%;
    max-width: 1440px;
}

/** NAV **/
nav {
    align-items: center;
    background-color: #222;
    display: flex;
    flex-flow: column nowrap;
    margin-bottom: 10px;
    width: 95%;
    max-width: 480px;
}
nav a, nav > h2 {
    border: 1px solid #666;
    margin: 0 0 5px 0;
    padding: 5px;
}
nav a {
    text-decoration: none;
}
nav > a, nav > h2 {
    width: 100%;
}
nav > a {
    background-color: #666;
}
nav > div {
    display: none;
}
nav > section { 
    align-items: center;
    display: none;
    flex-flow: row wrap;
    justify-content: space-between;
    margin: 0;
    width: 95%;
}
nav > section.nav {
    display: flex;
}
nav > section > a {
    display: inline-block;
    width: 48%;
}


/** MEDIA QUERIES **/
@media (min-width: 1000px) {
    nav {
        display: inline-flex;
        flex-flow: row nowrap;
        width: auto;
        max-width: none;
    }
    nav a {
        margin: 0 5px;
        width: auto;
    }
    nav > h2 {
        display: none;
    }
    nav > div {
        background-color: #666;
        display: block;
        height: 20px;
        margin: 0 5px;
        width:1px;
    }
    nav > section { 
        display: flex;
        flex-flow: row nowrap;
        width: auto;
    }
}

Answer 1

从nav > section > a删除{{1}}规则。

请参阅codepen。

Flexbox儿童并不总是尽可能地扩展

1 个答案: