Question

无论窗口的宽度是多少，如何使ul占据网页的整个宽度？

ul {
  grid-column: 1/13;
  list-style-type: none;
  display: table;
  margin: 0 auto;
}

li {
  float: left;
  border: 1px solid red;
}

li a {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  color: black;
  text-align: center;
  padding: 14px 14px;
  text-decoration: none;
  display: inline-block;
}

<ul>
  <li><a>ONE</a></li>
  <li><a>TWO</a></li>
  <li><a>THREE</a></li>
</ul>

在这个jsfiddle中有三个li。我希望在这种情况下，每个li占总宽度的33％，并且它们一起填充Web浏览器窗口的整个宽度

Answer 1

您可以对width: 100vw使用ul，也就是说，具有此规则的元素应采用屏幕的宽度。如果您还想要排除边距或其他元素的宽度，可以使用以下内容：width: calc(100vw - widthToExclude);。

以下是一个实时示例（我使用calc(33.3vw - 2px);，因为li还有border-left: 1px和border-right: 1px）：

body {
  margin: 0;
}

ul {
  list-style-type: none;
  display: table;
  margin: 0;
  padding: 0;
}

li {
  float: left;
  border: 1px solid red;
  width: calc(33.3vw - 2px);
}

li a {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    color: black;
    text-align: center;
    padding: 14px 14px;
    text-decoration: none;
    display: inline-block;
}

<ul>
  <li><a>ONE</a></li>
  <li><a>TWO</a></li>
  <li><a>THREE</a></li>
</ul>

Answer 2

你做了一个拼写错误并添加了边距（使元素缩小和居中）除了错误的显示选择：

这是一个很多错误和错误的方法......欢迎来到CSS的乐趣，添加了一些评论。

body {
  /* added the parent grid CSS system */
  display: grid;
  grid-template-columns: repeat(13, 1fr);
}

ul {
  grid-column: 1 / span 13;
  /* span is: the typo / missing */
  list-style-type: none;
  display: flex;
  /* lets make it a flexbox, 
  a grid will do too , 
  so would a table at width:100% 
  if table-layout is set to fixed 
  and li displayed as table-cell */
  margin: 0;/* none or 0, but not auto */
  padding: 0;/* might be usefull here ;) */
}

li {
  flex: 1;
  /* share evenly avalaible space */
  border: 1px solid red;
}

li a {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  color: black;
  text-align: center;
  padding: 14px 14px;
  text-decoration: none;
  display: /*inline-*/block;/* to fill parent's width */
}

<ul>
  <li><a>ONE</a></li>
  <li><a>TWO</a></li>
  <li><a>THREE</a></li>
</ul>

使每个<li>使用网格占用相同数量的浏览器宽度

2 个答案: