帶多行列表項的水平列表（ul）？

我有一個水平列表（對於導航欄），我想要一個單獨的列表項目被多線。我試圖用一個<br />但導致整個列表跳行帶多行列表項的水平列表（ul）？

這裏是我得到的html：

<ul class="nav_list"> 
     <li><a href="#">Home<a></li> 
     <li><a href="#">Bar/Bat Mitzvah<br />Tutoring<a></li> 
     <li><a href="#">Early <br />Childhood<a></li> 
     <li><a href="#">Home<a></li> 
     <li><a href="#">Home<a></li> 

</ul>

和css：

.nav_list { 
    float:right; 
    height:30px; 
    margin-top:55px; 
    width:510px; 
} 

.nav_list li { 
    display:inline; 
    list-style-type:none; 

} 

.nav_list li a { 
    font-size:18px; 
    font-family: arial; 
    color:#b64366; 
    text-decoration:none; 
    padding:4px 4px 5px 10px; 
    background-image:url('../images/nav_divider.png'); 
    background-repeat:no-repeat; 
    background-position:right; 
    font-weight:bold; 
    cursor:pointer; 

    }

，這是它應該是什麼像（Photoshop中）： enter image description here

有什麼建議？

來源

2012-06-24 Jonah Katz

這裏是您的解決方案：http://jsfiddle.net/3jWwH/

的HTML有一些錯誤，如 'A' 標籤不正確結束 '/ A'。

「BR /」正常工作，你只需要添加浮動：左爲「.nav_list李

此外我認爲你應該應用填充，以代替‘A’‘禮’。

這是正確的嗎？

來源

2012-06-24 16:37:06 Alvaro

或者也許這個其他的解決方案：http://jsfiddle.net/3jWwH/1/ – Alvaro

這個例子正是我一直在尋找。謝謝。 – Detilium

我想這是你想要的東西：

http://jsfiddle.net/zXzXn/1/

CSS：

.nav_list { 
    float:right; 
    margin-top:55px; 
} 

.nav_list li { 
    display:inline-block; 
    list-style-type:none; 
    text-align:center; 
    margin:0 10px 0 0; 

} 

.nav_list li a { 
    font-size:18px; 
    font-family: arial; 
    color:#b64366; 
    text-decoration:none; 
    padding:4px 10px 5px 10px; 
    background-image:url('../images/nav_divider.png'); 
    background-repeat:no-repeat; 
    background-position:right; 
    font-weight:bold; 
    cursor:pointer; 
    display:block; 

} 
.nav_list li a:hover{ 
    border-bottom:2px solid #b64366; 
}

來源

2012-06-24 16:29:02 SVS

關閉標籤，它會工作。你更新小提琴http://jsfiddle.net/zXzXn/2/ – SVS

您可以將寬度爲每個列表元素的約束他們到一定的寬度。這將導致單詞分成多行。

.nav_list li a { 
    width: 100px; 
}

然後添加一個底部邊框，以在懸停時進行下劃線。

.nav_list li :hover { 
    border-bottom: 1px solid #b64366; 
}

來源

2012-06-24 16:33:00 sachleen

帶多行列表項的水平列表（ul）？

回答

相關問題