CODEWITHSUNDEEP
htmlcssflexbox
user8487655
user8487655

Reputation:

ul is not occupying the full width

Do you know why the list items are not occupying the full width (have some white margin)? And also why the right arrow is not position at right using justify-content: space-between.

Example: 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;
    }
  }
}

Upvotes: 1

Views: 2488

Answers (2)

FluffyKitten
FluffyKitten

Reputation: 14312

  1. Your li elements are taking up the full width in your Fiddle. You have padding on your container-fluid element that is adding padding - set this to 0 and it will remove it.

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

  2. The arrow is not being positioned to the right because it is not the right-most element. You have an <a> element after it, and it is getting positioned to the right - you just can't see it because it's empty.

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

Upvotes: 0

kukkuz
kukkuz

Reputation: 42352

Do you know why the list items are not occupying the full width (have some white margin)?

The container-fluid has some default padding - reset this to 0 (if so desired)

And also why the right arrow is not position at right using justify-content-between.

Note that you have an empty a tag inside the li that is preventing the justify-content: space-between.

See demo below:

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

Upvotes: 1

Related Questions