eskimopest eskimopest - 1 month ago 5
CSS Question

ul wider than parent

I'm making a "menu" that will be able to slide. My question is how can I make the width of the ul fit the li's width even if it is wider than the with of the parent div.

I've made a simple example with html and css:

html:

<div class="parent">
<ul class="child">
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
</div>


and the css:

.parent {width:50%;height:50px;background-color:#000;overflow:hidden}
ul {padding:0px;}
ul li {width:150px;background-color:#fff;display:inline-block;}


here is the fiddle: https://jsfiddle.net/g1pbg5so/

thanks in advance.

Answer

If I am understanding correctly, all you want to do is always have the li's on one line no matter the width of the div.

If this is the case then just add

.parent ul {
    white-space:nowrap;
}

Updated snippet:

.parent {
  width: 50%;
  height: 50px;
  background-color: #000;
  overflow: hidden
}
ul {
  padding: 0px;
  white-space: nowrap;
}
ul li {
  width: 150px;
  background-color: #fff;
  display: inline-block;
}
<div class="parent">
  <ul class="child">
    <li>first</li>
    <li>second</li>
    <li>third</li>
  </ul>
</div>