空格：nowrap使元素位于窗口之外

Question

I am trying to have an UL on the right of a SPAN ( http://jsfiddle.net/Shg9L/24/ ).

<div>
  <span>Categories</span>
  <ul>
    <li><a href="#">Book</a></li>
    <li><a href="#">Computer</a></li>
  </ul>
</div>

When the window is resized down the LIs should get stacked but not under the SPAN.

The problem is when I resize the window some of the LI items on the right becomes hidden.

I think it is because of "white-space: nowrap" but without it I'm not able to make it work.

Can this be solved?

Answer 1

Display your unordered list as a block and hide the overflow. It will then take up all the available width. The list items will stack neatly in line with the edge of the unordered list when there isn't enough room:

div ul {
    list-style: none;   
    padding: 0;
    margin: 0;
    display: block;
    overflow:hidden;
}

The white-space:nowrap on your container <div> isn't needed as far as I can see. You can remove it.

JSFiddle

Answer 2

http://jsfiddle.net/Shg9L/29/

removed a coupple of things and added position:absolute; and inline:display-block to some elements

div {background-color:orange;}

div span {
    background-color: #E0E0E0;      
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 8px;  
}

div ul {
    position:absolute;
    top:0px;left:100px;
    list-style: none;   
    padding: 0;
    margin: 0;
    display: inline-block;
}
div ul li {
    background-color: #F0F0F0;      
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 8px;  
    display:inline-block;
}