CSS菜單定位

Question

ul#menu { 
    background-image:url(../images/menu.png); 
    width:992px; 
    height:62px; 
    margin:0 auto; 
    background-repeat: no-repeat; 
    overflow:hidden; 
    clear:both; 
} 

ul#menu li { 
    background-image:url(../images/sep.png); 
    background-position: top right; 
    background-repeat: no-repeat; 
    width:112px; 
    height:52px; 
    margin-right:20px;  
    display: block; 
    float:left; 
} 

ul#menu li a { 
    width:109px; 
    height:52px; 
    padding:0; 
    margin:0; 
    padding-top:14px; 
    font-size: 1.6em; 
    text-decoration: none; 
    display: block; 
    text-align: center; 
    outline: 0; 
    float:left; 
    color: #272727; 
} 

和這樣的事情<li><a href="#about" class="menuitem">Lorem Ispus Dolor</a></li> 的問題是，「排版Ispus悲」不水平延伸，而是垂直

Answer 1

ul#menu li a { 
    width:109px; 

這是與字體大小全文太窄，所以文字換行。

下面是寬度爲300px的示例。 http://jsfiddle.net/ncdkm/