ul不占用全宽

Question

你知道为什么列表项不占用全宽（有一些白边）吗？此外，为什么右边的箭头不是使用justify-content: space-between。

例子：http://jsfiddle.net/Lph010v6/

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（如果需要的话）

而且也是为什么右箭头是不使用 证明，内容之间的正确位置。

请注意，你有li内的空a标签是防止justify-content: space-between。

请参见下面的演示：

/*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; 
 
}

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

Answer 2

1. 你li元素占用了整个宽度的拨弄。您在添加填充的元素container-fluid上填充 - 将其设置为0，并将其删除。

   .container-fluid { padding-left:0; padding:right:0; } 
   

2. 箭头没有定位在右边，因为它不是最右边的元素。在它后面有一个<a>元素，并且它位于右侧 - 因为它是空的，所以你看不到它。

   <li> 
       <div>[...]</div> 
       <span>[..]</span> 
       <a href=""> </a> /* this is the element being positioned to the right*/ 
   </li>