Question

我希望ul中的nav占据页面宽度的66％，然后内部的六个项目可以相应地给出宽度。

问题是，我正在使用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：

{{1}}

<强> codepen

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

的良好开端

Answer 3

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

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

3 个答案: