Question

我在Flex容器中有五个li文本元素，具有这些属性

.contentwrapper{
  position: relative;
  width: 100%;
  padding-left: calc(((((100vw - (13rem))/ 12) * 2) + (1rem * 1)) + 1.5rem);
  padding-right: calc(((((100vw - (13rem))/ 12) * 2) + (1rem * 1)) + 1.5rem - .1px);
  margin: 0 auto;
  height: 100%;
}

ul.nav{
  position: relative;
  padding-top: 100px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  list-style: none;
}

li.navitem{
  position: relative;
  display: inline-block;
  cursor: default;
  font-size: 1.2em;
  text-transform: uppercase;
}

<div class="contentwrapper">
      <ul class="nav">
        <li class="navitem active">Online</li>
        <li class="navitem">In person</li>
        <li class="navitem">By phone</li>
        <li class="navitem">Mobile App</li>
        <li class="navitem">Inmate</li>
      </ul>
 </div>

问题是，由于某些原因，li元素不会到达容器的边缘，即使没有填充或边距。我做错了什么，如何使用Flexbox（或不使用）实现这一目标。非常感谢帮助。

Example

Answer 1

删除所有边距＆amp;填充并设置box-sizing:border-box

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.contentwrapper {
  position: relative;
  width: 100%;
  padding-left: calc(((((100vw - (13rem))/ 12) * 2) + (1rem * 1)) + 1.5rem);
  padding-right: calc(((((100vw - (13rem))/ 12) * 2) + (1rem * 1)) + 1.5rem - .1px);
  margin: 0 auto;
  height: 100%;
  background: red;
}

ul.nav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  list-style: none;
  background: pink;
}

li.navitem {
  position: relative;
  cursor: default;
  font-size: 1em;
  text-transform: uppercase;
  border: 1px solid grey;
}

<div class="contentwrapper">

  <ul class="nav">
    <li class="navitem active">Online</li>
    <li class="navitem">In person</li>
    <li class="navitem">By phone</li>
    <li class="navitem">Mobile App</li>
    <li class="navitem">Inmate</li>

  </ul>
</div>

Answer 2

它因浏览器而异，但默认情况下ul元素有边距和填充。请参阅此问答：Does UL have default margin or padding

因此，您需要做的是从ul元素中删除默认边距和填充：

ul.nav {
  position: relative;
  margin: 0; /* <- here */
  padding: 100px 0 0; /* here, too, but retaining custom 100px top padding */
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  list-style: none;
}

请参阅updated JSFiddle。

Flexbox空间行为问题

2 个答案: