CODEWITHSUNDEEP
htmlcss
WomenWhoCode
WomenWhoCode

Reputation: 426

Horizontal <ul> list doesn't take entire width of it's children <li> elements

I have horizontal unordered list with 9 <li> items total. Every <li> item has width of 342px(width defined based on <img> element inside the list). All images has the same width, and every

  • element has margin-left: 10px.

    <ul class="carousel" role="list" style="left: 0px;">
   <li class="carousel-card" aria-posinset="1" aria-hidden="false" role="listitem" aria-setsize="9" style="display: inline-block;">
      <span class="a-list-item">
         <div data-reference-url="Url" data-reference-title="Title" class="data-item">
            <a class="carousel-item" target="" rel="noopener" href="link">
               <div class="image">
                  <img alt="image" src="myUrl" height="192px" width="342px">
                  <div class="someClass">...</div>
               </div>
            </a>
         </div>
      </span>
   </li>
   <li class="carousel-card" aria-posinset="2" aria-hidden="false" role="listitem" aria-setsize="9" style="display: inline-block;">
      <span class="a-list-item">
         <div data-reference-url="Url" data-reference-title="Title" class="data-item">
            <a class="carousel-item" target="" rel="noopener" href="link">
               <div class="image">
                  <img alt="image" src="myUrl" height="192px" width="342px">
                  <div class="someClass">...</div>
               </div>
            </a>
         </div>
      </span>
   </li>
   ....
</ul>

    Even though I have 9 items in the list, I see that for some reason, entire width of <ul> element is always no more than 1385 px. While I expect it to be:

    9[items in the list]*(342px[width of <li>)] + 10px [margin of <li>]) = 3168 px.

    I inspected all li elements, and confirmed that their width is correct and is always 342px for every element. What can be the reason why <ul> width is not equal to the width of all li elements that are inside of <ul>?

    My CSS styles:

    .carousel {
    display: inline-block;
    position: relative;
    left: 0px;
    margin: 0px 0px 14px;
    padding: 0px;
    display: table;
    content: "";
    line-height: 0;
    font-size: 0;

}

.carousel-card {
    display: inline-block;
    margin: 0 10px 0 0;
    position: relative;
    overflow: hidden;
    text-align: center;
    min-width: 145px;
    vertical-align: top;
    min-height: 200px;
    max-width: unset !important;
    max-height: unset !important;
 }

.a-list-item {
    text-align: center;
    position: relative;
    display: inline-block;
    min-width: 145px;
}

    Upvotes: 0

    Views: 674

    • Answers (1)

    retterBadach
    retterBadach

    Reputation: 86

    The calculated ul width is not based on the content of the li. Content can overflow the container it is in. You have to specify the width of the li elements. At first glance the outcome seems based on the min-width of the elements.

    Upvotes: 1

    Related Questions