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

Question

我正在尝试制作一个导航栏，根据打开的浏览器的宽度判断自动填充任何计算机屏幕的宽度 window。当人们重新调整他们的浏览器时，我希望我的导航栏相应地重新调整自己。我有三个菜单按钮组成我的导航栏。我觉得一个值应该是 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>

Answer 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>

Answer 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>

Answer 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>

Answer 4

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

我还会在图库下拉链接中添加另一个 class，这样您就可以根据需要分别设置宽度为 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;
}

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

Making navigation menu autiomatically scale to browsers width in html and css

html

css

navigation

menu

width