水平滚动
问题描述:
我有一个UL列表,它是一个引导格的元素:水平滚动
<div class="row">
<div class="col-sm-8">
<div id="playlist-wrapper">
<ul id="playlist">
<li>
...
</li>
<li>
...
</li>
<li>
...
</li>
</ul>
</div>
</div>
</div>
如果一堆li元素的比COL-SM-8的宽度,他们会跳到更大下一行。
我想添加一个水平滚动条,因此所有li元素都在同一个li中,只有在col-sm-8的宽度上才可以看到,并且可以通过它们水平滚动。
我尝试了固定的高度设置到包装(所以只有一个行可以看出),并加入溢出-Y隐蔽性和白空间NOWRAP但它不工作:
#playlist-wrapper{
height: 150px;
overflow-y: hidden;
overflow: auto;
Tried also with overflow-x: scroll;
white-space: nowrap;
}
也试过:
#playlist-wrapper ul {
white-space: nowrap;
}
其余的CSS不会影响溢出只是为了使其水平列表和一些文本/颜色属性。
ul#playlist {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
ul#playlist li {
float: left;
margin-left: 10px;
margin-top: 20px;
}
ul#playlist li p {
text-align: center;
color: white;
font-weight: bold;
text-decoration: none;
}
有了这个CSS我有一个垂直滚动条。有没有可能有一个水平滚动条?
答
我认为你需要像这样
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#playlist-wrapper ul li{
height: 50px;
overflow-y: hidden;
overflow: auto;
white-space: nowrap;
}
#playlist-wrapper{
height: 150px;
width:150px;
overflow-y: hidden;
overflow: auto;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="row">
<div class="col-sm-2">
<div id="playlist-wrapper">
<ul id="playlist">
<li>F* Eduardo Sierra Pineda</li>
<li>F* Eduardo Sierra Pineda</li>
<li>F* Eduardo Sierra Pineda</li>
</ul>
</div>
</div>
</div>
</body>
</html>
哪些类/ IDS正在受到你的CSS?这似乎在你的问题中被遗漏了。 – TrampolineTales
用css ids更新。所有的CSS主要影响播放列表包装。试图直接添加CSS到ul元素,但没有工作 – lapinkoira
似乎为我工作:http://codeply.com/go/IgLjagTmKS – ZimSystem