CSS "display: inline-block" Refusing to break lines [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 11 years ago.

I'm working on a project and I'm attempting to style a specific link type in the same way as Adi Palaz uses here to define external links. I have my code set up the same as his but for some reason display: inline-block is overflowing the containing <li> element (which has a defined width) so that the list elements stack 2 side-by-side.

Can someone tell me how to go about forcing the link "The Mountain and the Mole Hill" at bottom of this demo, development page (http://dreamstarstudios.net/sandbox/philosimply/开发者_JAVA百科sliding_drawer.html) to break lines? I thought inline-block was expressly for the purpose of have text that is displayed as a block level element yet still breaks lines. The even stranger thing is that changing it to display: inline doesn't force a line break but rather just causes the text to overflow the defined width :(

EDIT My apologies for not explaining further. If you look at this link (http://www.adipalaz.com/linksbg.html) you will see how this developer used white-space: nowrap (which is needed) to achieve the desired effect I'm going for. What I really need to know is why it is working for him but not me.

---

Just remove white-space:nowrap;

http://www.w3schools.com/cssref/pr_text_white-space.asp

---

in your style sheet 'line 206' you are setting the width, it is doing exactly what you are telling it to do, you will need to make it wider or add clear: both; to the li.

---

You've set white-space:nowrap on this link. That's why it won't break.