在html和css中使导航菜单自动缩放到浏览器宽度答案

【问题标题】：Making navigation menu autiomatically scale to browsers width in html and css在html和css中使导航菜单自动缩放到浏览器宽度
【发布时间】：2017-07-20 11:10:27
【问题描述】：

我正在尝试制作一个导航栏，它可以根据打开的浏览器窗口的宽度自动填充任何计算机的屏幕宽度。当这个人重新调整他们的浏览器时，我希望我的导航栏相应地重新调整自己。我有三个菜单按钮组成我的导航栏。我觉得一个值应该是 33.334% 之类的，但我已经摆弄了一个小时，我无法让它工作。

#navMenu {
    margin: 0 auto;
    padding: 0;
    width: auto;
    text-align: center;
    display: table;
    width: 1436px;
}

#navMenu ul {
    margin: 0;
    padding: 0;
    line-height: 30px;
    list-style-type: none;
    display: table-cell;
}

#navMenu li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    position: relative;
    background: #008000;
}

#navMenu ul li a {
    text-align: center;
    font-weight: bold;
    font-family: 'TopSecret';
    src: url('TopSecret.ttf');
         url('TopSecret.ttf') format('truetype');
    text-decoration: none;
    height: 30px;
    width: 476px;
    display: block;
    color: #FFF;
    border: 1px solid #000;
}

#navMenu ul ul {
    position: absolute;
    visibility: hidden;
    top: 32px;
}

#navMenu ul li:hover ul {
    visibility: visible;
}

#navMenu li:hover {
    background: #329932;
}   

#navMenu ul li:hover ul li a:hover {
    background: #329932;
    color: #000;
}

#navMenu a:hover {
    color: #000
}

.clearFloat {
    clear: both;
    margin: 0;
    padding: 0;
}

<body>
    <div style="margin: 0 auto;">
        <div id="navMenu">
            <ul>
                <li><a href="index.html">Home</a>
                </li>
                <li><a href="#">Gallery</a>
                    <ul>
                        <li><a href="#>2018</a></li>
                        <li><a href="#">2017</a></li>
                        <li><a href="#">2016</a></li>
                        <li><a href="#">2015</a></li>
                    </ul>
                </li>
                <li><a href="tankreviews.html">Shop</a>
                </li>
            </ul>
            <br class="clearFloat">
        </div>
    </div>
</body>

【问题讨论】：

标签： html css menu navigation width

【解决方案1】：

您可以为此使用flexbox：

#navMenu {
  margin: 0 auto;
  padding: 0;
  width: auto;
  text-align: center;
  display: flex;
  width: 100%;
}

#navMenu ul {
  margin: 0;
  padding: 0;
  line-height: 30px;
  list-style-type: none;
  width: 100%;
  display: flex;
}

#navMenu ul li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  background: #008000;
  flex: 1;
}

#navMenu ul li a {
  text-align: center;
  font-weight: bold;
  font-family: 'TopSecret';
  src: url('TopSecret.ttf');
  url('TopSecret.ttf') format('truetype');
  text-decoration: none;
  height: 30px;
  display: block;
  color: #FFF;
  border: 1px solid #000;
}

#navMenu ul ul {
  position: absolute;
  visibility: hidden;
  top: 32px;
  display: flex;
  flex-direction: column;
}

#navMenu ul li:hover ul {
  visibility: visible;
}

#navMenu li:hover {
  background: #329932;
}

#navMenu ul li:hover ul li a:hover {
  background: #329932;
  color: #000;
}

#navMenu a:hover {
  color: #000
}

.clearFloat {
  clear: both;
  margin: 0;
  padding: 0;
}

<div>
  <div id="navMenu">
    <ul>
      <li>
        <a href="index.html">Home</a>
      </li>
      <li>
        <a href="#">Gallery</a>
        <ul>
          <li>
            <a href="#">2018</a>
          </li>
          <li>
            <a href="#">2017</a>
          </li>
          <li>
            <a href="#">2016</a>
          </li>
          <li>
            <a href="#">2015</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="tankreviews.html ">Shop</a>
      </li>
    </ul>
    <br class="clearFloat ">
  </div>
</div>

【讨论】：

【解决方案2】：

这是你需要的吗？我已经替换了浮动并使用了 flexbox。

#navMenu {
  width: 1436px;
}

#navMenu ul {
  margin: 0;
  padding: 0;
  line-height: 30px;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}

#navMenu li {
  background: #008000;
  width: calc(100% / 3);
  border: 1px solid #000;
  text-align: center;
}

#navMenu ul li a {
  font-weight: bold;
  font-family: 'TopSecret';
  text-decoration: none;
  width: 100% display: block;
  color: #FFF;
}

#navMenu ul ul {
  position: absolute;
  visibility: hidden;
  top: 40px;
  display: flex;
  flex-wrap: wrap;
}

#navMenu ul ul li {
  width: 100%;
}

#navMenu ul li:hover ul {
  visibility: visible;
}

#navMenu li:hover {
  background: #329932;
}

#navMenu ul li:hover ul li a:hover {
  background: #329932;
  color: #000;
}

#navMenu a:hover {
  color: #000
}

<div style="margin: 0 auto;">
  <div id="navMenu">
    <ul>
      <li><a href="index.html">Home</a>
      </li>
      <li><a href="#">Gallery</a>
        <ul>
          <li><a href="#">2018</a></li>
          <li><a href="#">2017</a></li>
          <li><a href="#">2016</a></li>
          <li><a href="#">2015</a></li>
        </ul>
      </li>
      <li><a href="tankreviews.html">Shop</a>
      </li>
    </ul>
  </div>
</div>

【讨论】：

【解决方案3】：

希望这会有所帮助：

#navMenu {
    margin: 0 auto;
    padding: 0;
    width: auto;
    text-align: center;
    display: table;
    width: 100%;
}

#navMenu ul {
    margin: 0;
    padding: 0;
    line-height: 30px;
    list-style-type: none;
    display: table-cell;
    width:100%
}

#navMenu li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    position: relative;
    background: #008000;
    width: 33.3333%;
}

#navMenu ul li a {
    text-align: center;
    font-weight: bold;
    font-family: 'TopSecret';
    src: url('TopSecret.ttf');
         url('TopSecret.ttf') format('truetype');
    text-decoration: none;
    height: 30px;
    display: block;
    color: #FFF;
    border: 1px solid #000;
}

#navMenu ul ul {
    position: absolute;
    visibility: hidden;
    top: 32px;
}
#navMenu ul ul li {
  float: none;
  right:0;
  left:0;
  width:100%
}
#navMenu ul li:hover ul {
    visibility: visible;
}

#navMenu li:hover {
    background: #329932;
}   

#navMenu ul li:hover ul li a:hover {
    background: #329932;
    color: #000;
}

#navMenu a:hover {
    color: #000
}

.clearFloat {
    clear: both;
    margin: 0;
    padding: 0;
}

<body>
    <div style="margin: 0 auto;">
        <div id="navMenu">
            <ul>
                <li><a href="index.html">Home</a>
                </li>
                <li><a href="#">Gallery</a>
                    <ul>
                        <li><a href="#>2018</a></li>
                        <li><a href="#">2017</a></li>
                        <li><a href="#">2016</a></li>
                        <li><a href="#">2015</a></li>
                    </ul>
                </li>
                <li><a href="tankreviews.html">Shop</a>
                </li>
            </ul>
            <br class="clearFloat">
        </div>
    </div>
</body>

【讨论】：

【解决方案4】：

给你的 NavMenu 一个相对大小，即 100%（如果你不希望它变得大于某个大小，你也可以使用 max-width）并将 33% 放在 #navMenu li 而不是 #navMenu ul li a （没有设置任何宽度会搞砸！）。

我还会在 Gallery 下拉链接中添加另一个类，以便您可以根据需要分别设置为 100% 的宽度或固定大小的样式。

这就是它的样子：

#navMenu {
    margin: 0 auto;
    padding: 0;
    width: auto;
    text-align: center;
    display: table;
    max-width: 1436px;
width: 100%;
}

#navMenu ul {
    margin: 0;
    padding: 0;
    line-height: 30px;
    list-style-type: none;
    display: table-cell;
}

#navMenu li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    position: relative;
    background: #008000;
    width: 33%;
}

#navMenu ul.drop li {
    width: 100%;
}

#navMenu ul li a {
    text-align: center;
    font-weight: bold;
    font-family: 'TopSecret';
    src: url('TopSecret.ttf');
         url('TopSecret.ttf') format('truetype');
    text-decoration: none;
    height: 30px;
    display: block;
    color: #FFF;
    border: 1px solid #000;
}

#navMenu ul ul {
    position: absolute;
    visibility: hidden;
    top: 32px;
}

#navMenu ul li:hover ul {
    visibility: visible;
}

#navMenu li:hover {
    background: #329932;
}   

#navMenu ul li:hover ul li a:hover {
    background: #329932;
    color: #000;
}

#navMenu a:hover {
    color: #000
}

.clearFloat {
    clear: both;
    margin: 0;
    padding: 0;
}

【讨论】：