Question

我有一个响应式下拉菜单，当宽度为100％时，它将以最小尺寸为中心，但当它更改为最大宽度100％时，它不会。我将其父级及其父级的父级设置为最大宽度100％，但max-width属性似乎不像它应该的那样工作。

根据我的理解，max-width是相对于父级的，所以如果其父级及其父级的父级设置为100％的最大宽度，则设置为max-width宽度的最小子级应该宽度与最高父级相同，最大宽度为100％。

我的代码有问题或我理解错了吗？我知道我可以解决宽度为100％的问题，但我想了解为什么最大宽度不适合

＆＃13;

nav {
  color: white;
  background-color: orange;
  margin: auto;
  padding: 0;
  max-width: 100%;
}

nav li > span, nav  a {
  font-size: 1.3em;
}
nav ul {
  padding: 0;
  text-align: center;
  max-width: 100%;
  margin: auto;
}

nav li {
  border-style: solid;
  border-width: 0 1px 0 0;
  border-color: rgba(0,0,0,.1);
  list-style: none;
  max-width: 100%;
}
.main-nav {
  position: relative;

}
.sub-nav {
  box-shadow: 5px 5px 10px rgba(0,0,0,.1);
  z-index: 1;
  position: absolute;
  display: none;
  background-color: white;
  max-width: 100%;
}
.sub-nav li {
  max-width: 100%;
}

.sub-nav li a {
  max-width: 100%;
}
.main-nav:hover .sub-nav {
  display: block;
}
@media screen and (min-width: 450px){
  nav li {
    display: inline-block;
    margin: 3px;
    padding: 2px;
  }
  nav ul {
    text-align: right;
    padding: 0 5% 0 0;
  }
  .main-title {
    text-align: left;
    margin: 0 0 15px 15%;
    padding: 15px 0 0 0;
    color: orange;
    font-size: 4em;
  }

}

＆＃13;

<header>
  <h1 class="main-title">This Is a Test</h1>
  <nav>
    <ul>
      <li class="main-nav home-page active">
        <a href="index.html">HOME</a></li>
      <li class="main-nav">
        <span> Content 1 </span>
        <ul class="sub-nav">
          <li><a href="page1.html">Page 1</a></li>
          <li><a href="page2.html">Page 2</a></li>
          <li><a href="page3.html">Page 3</a></li>
        </ul>
      </li>
      <li class="main-nav">
        <span> Content 2 </span>
        <ul class="sub-nav">
          <li><a href="page4.html">Page 4</a></li>
          <li><a href="page5.html">Page 5</a></li>
          <li><a href="page6.html">Page 6</a></li>
        </ul>
      </li>
      <li class="main-nav">
        <span> Content 3 </span>
        <ul class="sub-nav">
          <li><a href="page7.html">Page 7</a></li>
          <li><a href="page1.html">Page 8</a></li>
          <li><a href="page1.html">Page 9</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>
<section>
</section>
<footer>
</footer>

＆＃13;

Demo

Answer 1

我不确定max-width与它有什么关系，但只是删除文本对齐会产生一个居中的菜单。

@media screen and (min-width: 450px) {
    ...
    nav ul {
        /* text-align: right; */
        ...
    }

<强> Demo

Here我删除了max-width的每个实例，似乎没有任何改变。

为什么我的下拉菜单不以max-width为中心？

1 个答案: