創建水平滾動UL

-1

我有一個需要自動響應滾動UL列表的導航欄。創建水平滾動UL

我的HTML：

<nav class="navigation"> 
    <ul> 
     <li>Home </li> 
     <li>Publications </li> 
     <li>Exams </li> 
     <li>Courses </li> 
     <li>Example Text </li> 
     <li>Example Text </li> 
     <li>Example Text </li> 
     <li>Example Text </li> 
     <li>Example Text </li> 
    </ul> 
</nav>

CSS：

.navigation{ 
    background-color: darkblue; 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    max-height:50px; 
    margin-bottom:10px; 
    overflow: hidden; 
} 
.navigation ul{ 
    float:right; 
    list-style-type: none; 
    height: 50px; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space: nowrap; 

} 
.navigation ul li{ 
    float:left; 
    color:#ffffff; 
    margin-right:10px; 
    text-align: center; 

}

我在做什麼錯？它似乎沒有按照我的意圖工作。

來源

2016-07-23 Vishnu Raj

它正在做什麼？你想要它做什麼？我們不介意讀者。 –

是的。你能否詳細說明你的問題，並給我們一個小提琴的URL來檢查發生了什麼問題？ –

真的很抱歉沒有給你具體的想法，我在這裏是新的。會給你一個URL。我必須使用滾動功能創建一個導航欄，就像在Android菜單中一樣。 –

感謝您的支持。我找到了答案我的自我。也得到了一些來自Material.css的幫助，這裏是準確答案

這就是我想要的。

.navigation{ 
 
    background-color: darkblue; 
 
\t position:fixed; 
 
\t top:0; 
 
\t left:0; 
 
\t width:100%; 
 
\t max-height:50px; 
 
\t margin-bottom:10px; 
 
\t overflow: hidden; 
 
    } 
 
.navigation ul { 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    position: relative; 
 
    overflow-x: auto; 
 
    overflow-y: hidden; 
 
    height: 48px; 
 
    background-color: #fff; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    white-space: nowrap; 
 
} 
 
ul { 
 
    padding: 0; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
} 
 
.navigation ul li { 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex-grow: 1; 
 
    -ms-flex-positive: 1; 
 
    flex-grow: 1; 
 
    display: block; 
 
    float: left; 
 
    text-align: center; 
 
    line-height: 48px; 
 
    height: 48px; 
 
    padding: 0; 
 
    margin: 0; 
 
    text-transform: uppercase; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    letter-spacing: .8px; 
 
    width: 15%; 
 
    min-width: 80px; 
 
} 
 
ul li { 
 
    list-style-type: none; 
 
} 
 
li { 
 
    display: list-item; 
 
    text-align: -webkit-match-parent; 
 
}

<nav class="navigation"> 
 
<ul> 
 
    <li>Test 1</li> 
 
    <li>Test 1</li> 
 
    <li>Test 1</li> 
 
    <li>Test 1</li> 
 
    <li>Test 1</li> 
 
    <li>Test 1</li> 
 
    <li>Test 1</li> 
 
    <li>Test 1</li> 
 
    <li>Test 1</li> 
 
    <li>Test 1</li> 
 
    <li>Test 1</li> 
 
</ul> 
 
</nav>

來源

2016-07-23 05:51:47

創建水平滾動UL

回答

相關問題