html - CSS空白：nowrap

Question

問題はvertical-align: top機能しません

CSS

ul { 
     width: 160px;
    display: block;
    white-space: nowrap;
     overflow: auto; 
    vertical-align: top;
     }
li { 
     width: 80px;
     display: inline-block;
     }

HTML

<div>
   <ul>
       <li>one</li><li>two</li><li>three</li><li>four<br />Test</li>
   </ul>
 </div>

私は4のように上部に1、2、3を作る必要があります。助けてください

ここの例http://jsfiddle.net/Y7PhV/

ありがとうございました

Answer 1

ULの代わりにLIを垂直に揃えます

li {vertical-align:top;}

http://jsfiddle.net/Y7PhV/88/

Answer 2

このcssは機能するはずです...

ul {
width: 80px;
display: block;
/white-space: nowrap;/
/overflow: auto;/
}
li {
background: papayaWhip;
height: 40px;
width: 80px;
display: inline-block;
}