Question

你知道为什么列表项没有占据整个宽度（有一些白色边距）吗？以及使用justify-content: space-between右箭头不在右侧的原因。

HTML：

<div class="container-fluid">
  <div class="row no-gutters">
    <div class="col-12">
      <ul class="MobileCategories">
        <li>
          <div>
            <img src="/img/categories/category1.svg"/>
            <span class="MobileCategories__title">Category</span>
          </div>
          <span><i class="fa fa-angle-right" aria-hidden="true"></i></span>
          <a href=""> </a>
        </li>
         <li>
          <div>
            <img src="/img/categories/category2.svg"/>
            <span class="MobileCategories__title">Category 2</span>
          </div>
          <span><i class="fa fa-angle-right" aria-hidden="true"></i></span>
          <a href=""> </a>
        </li>
      </ul>
    </div>
  </div>
</div>

CSS：

.MobileCategories{
  margin-top: 10px;
  width: 100%;
  background-color:green;
  li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #000;
    background-color: orange;
    padding:20px;

    img{
      width: 30px;
      height: 30px;
    }
    .MobileCategories__title{

      margin-left: 15px;
    }
  }
}

Answer 1

你知道为什么列表项没有占据整个宽度（有一些白色边缘）？

container-fluid有一些默认填充 - 将其重置为0（如果需要）

还有为什么右箭头没有正确使用的位置证明化内容之间。

请注意，a内的li个空标记阻止了justify-content: space-between。

见下面的演示：

＆＃13;

/*This style from normalize styles of jsfiddle*/
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.container-fluid { /*ADDED THIS*/
  padding: 0!important;
}

.MobileCategories {
  margin-top: 10px;
  width: 100%;
  background-color: green;
}

.MobileCategories li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #000;
  background-color: orange;
  padding: 20px;
}

.MobileCategories li img {
  width: 30px;
  height: 30px;
}

.MobileCategories li .MobileCategories__title {
  margin-left: 15px;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row no-gutters">
    <div class="col-12">
      <ul class="MobileCategories">
        <li>
          <div>
            <img src="/img/categories/category1.svg" />
            <span class="MobileCategories__title">Category</span>
          </div>
          <span><i class="fa fa-angle-right" aria-hidden="true"></i></span>
          <!--<a href=""> </a>-->
        </li>
        <li>
          <div>
            <img src="/img/categories/category2.svg" />
            <span class="MobileCategories__title">Category 2</span>
          </div>
          <span><i class="fa fa-angle-right" aria-hidden="true"></i></span>
          <!--<a href=""> </a>-->
        </li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

Answer 2

您的li元素占据了小提琴中的整个宽度。你的container-fluid元素上添加了填充填充 - 将其设置为0并将其删除。
```
.container-fluid { padding-left:0; padding:right:0; }
```
箭头未定位在右侧，因为它不是最右边的元素。您之后有一个<a>元素，它位于右侧 - 您无法看到它，因为它是空的。
```
<li>
  <div>[...]</div>
  <span>[..]</span>
  <a href=""> </a> /* this is the element being positioned to the right*/
</li>
```

ul不占用整个宽度

2 个答案: