Reputation: 426
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
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
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