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

Question

无论窗口的宽度如何，如何让这个 ul 占据网页的整个宽度？

http://jsfiddle.net/32hp1w5p/

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

除了错误的显示选择之外，你打错了字并添加了边距(使元素缩小并居中):

有很多错误和错误的方法......欢迎体验 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>