CODEWITHSUNDEEP
htmlcss
eskimopest
eskimopest

Reputation: 433

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.

Upvotes: 0

Views: 1132

Answers (2)

Pete
Pete

Reputation: 58432

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>

Upvotes: 2

roberrrt-s
roberrrt-s

Reputation: 8210

If you wish to force all list items on the same line, and make them scroll in their parent:

.parent {width:400px;height:50px;background-color:#000;overflow:scroll}
ul {float:left;padding:0px; whitespace: nowrap; }

Change the overflow to 'scroll' and force the ul's wrapping on 'nowrap'

Demo: https://jsfiddle.net/g1pbg5so/2/

Upvotes: 0

Related Questions