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

【问题标题】：How to stretch and center an unordered list?如何拉伸和居中无序列表？
【发布时间】：2018-07-30 02:58:02
【问题描述】：

我希望nav中的ul占据页面宽度的66%，然后可以相应地给里面的六个项目指定宽度。

这是问题所在，我的屏幕从 1024 开始编码，但是当我将页面拉伸得更宽时，ul 不会拉伸并且不会占据页面的 66%，而 @ 987654324@ 项目也没有伸展得更宽，所以比例丢失了。

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>

【问题讨论】：

标签： html css responsive-design css-float

【解决方案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

【讨论】：

【解决方案2】：

我建议使用 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/

【讨论】：

【解决方案3】：

在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]

【讨论】：

嘿，谢谢，我不允许使用引导程序，我不知道它是什么