创建水平滚动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

回答

相关问题