如何拉伸和居中无序列表？

Question

我想让nav中的ul占页面宽度的66%，然后里面的6个item可以相应的给宽度。

问题出在这里，我一开始在 1024 屏幕编码，但是当我将页面拉伸得更宽时，ul 没有拉伸并且没有占据页面的 66% ，并且 li 项目也不会拉伸得更宽，因此比例丢失。

nav {
  margin-top: 20px;
  margin-left: 12.5px;
  overflow: hidden;
  padding-top: 12.5px;
  padding-bottom: 3px;
  width: 66%;
}

nav ul li {
  float: left;
  width: 11%;
  padding: 8px;
  margin-right: 15px;
  margin-bottom: 10px;
  /*Bottom margin to ensure that they do not get stuck together when the screen is squashed*/
  text-align: center;
  background-color: #cccccc;
  font-size: 1.25em;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 1.6px 1.6px #3e3e3e;
}

<nav>
  <ul>
    <li>HOME</li>
    <li>SHOP</li>
    <li>NEWS</li>
    <li>ABOUT US</li>
    <li>CONTACT US</li>
    <li>SUBSCRIBE</li>
  </ul>
</nav>

Answer 1

我建议使用 flexbox:

nav ul {
  display: flex; /*declare flexbox*/
  justify-content: space-between; /*space between items*/
  width: 66%; /*percentage width*/
  margin: 0 auto; /*center horizontally*/
  padding: 0; /*reset default padding*/
}

codepen

Answer 2

在 html

 <div class="nav">
   <ul>
     <li>HOME</li>
     <li>SHOP</li>
     <li>NEWS</li>
     <li>ABOUT US</li>
     <li>CONTACT US</li>
     <li>SUBSCRIBE</li>
    </ul>
 </div>

在 css

    .nav{                
    }

    .nav ul li{             
    }


    bootstrap will tackcare on media queries [ responsive bootstrap]
                [1]

Answer 3

我建议使用 flexbox。

nav {
 margin-top: 20px;
 margin-left: 12.5px;
 overflow: hidden;
 padding-top: 12.5px;
 padding-bottom: 3px;
 width: 66%;
 display: flex;
 justify-content: start;
 flex-direction: row;
}

flexbox 的良好开端https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如何拉伸和居中无序列表？

How to stretch and center an unordered list?

html

css

css-float

responsive-design