CODEWITHSUNDEEP
htmlcsshtml-listsstretch
Dimitris Damilos
Dimitris Damilos

Reputation: 2438

css stretch li based on content

I have this code here and I am trying to make the ul.submenu li to stretch according to its contents. As you can see, the 3rd li of the ul.submenu has a long text which hides instead of stretching the li.

I have tried changing the display property of all elements on the DOM with various combinations but I cannot get it right.

What am I doing wrong and why this happens? What am I missing?

Any help will be very much appreciated! :)

Upvotes: 2

Views: 5913

Answers (2)

Barney
Barney

Reputation: 16456

Currently the text has little bearing on the layout, because of block display and absolute positioning.

You can change this by giving the lis display: inline-block and white-space: nowrap. I've forked an example where the sub-menu is as long as the longest item requires.

Explanation

inline-block gives the element properties of inline and block display: inline in that the element should flow like text, and take its initial layout and dimensions from the text it contains. But the block part means you can also specify top and bottom padding and margin, clears, etc. Even with this set, the containing element is still absolutely positioned (most text content just flows as long as it needs because normally the containing block element fills 100% width - not the case for absolute, relative and fixed elements), so its instinct is to collapse to the minimum width, that of the first word. But if we use white-space: nowrap, we can force the text to extend as much as it needs, so the full sentence is used as the measure.

Upvotes: 6

Chris
Chris

Reputation: 1

You could just change the min-width to:

min-width: 240px;

View Example

Upvotes: -1

Related Questions