给div添加横向的滚动条

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.div1{
height: 100px;
width: 600px;
background: aqua;
}
ul,li{
list-style: none;
}
ul{
overflow: hidden;
overflow-x: auto;
white-space: nowrap;
}
li{
height:80px;
width: 212px;
background: salmon;
margin-right: 5px;
display: inline-block;
}
</style>
</head>
<body>
<div class="div1">
<ul>
<li>
li1
</li>
<li>
li2
</li>
<li>
li3
</li>
<li>
li4
</li>
<li>
li5
</li>
</ul>
</div>
</body>
</html>

li的display:inline-block;不可缺少；

ul的white-space:nowrap;不可缺少

时间： 2024-11-05 13:41:04

给div添加横向的滚动条的相关文章

ext grid添加横向滚动条

Ext.override(Ext.grid.GridView, {                  renderBody : function() {                      var markup = this.renderRows();                      if (markup == "")                          markup = "<div style='width:" + this.g

DIV模拟的自定义滚动条

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>div模拟的自定义滚动条</title><style type="text/css">* { margin: 0; padding: 0;} p { heigh

js实现动态给一个div添加文本内容与简单的日历

js实现动态给一个div添加文本内容(即在文本框中输入一段文字,点击设置文字按钮实现将文本框中的文字添加到div中) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <style

div+css怎么实现滚动条样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

鼠标悬停为子div添加class

<!-- author:IluckySi since:20150331 功能:一个父div下面有多个子div,如何实现鼠标悬停到子div上面,子div添加class. --> <!DOCTYPE html> <html> <head> <title>mouse.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,ke

向Table添加横向滚动条

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>给table新增水平滚动条</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equ

VB ListBox 添加横向滚动条

Private Declare Function SendMessage Lib "user32 " Alias "SendMessageA" (ByVal hwnd As Long, _ ByVal wMsg As Long, _ ByVal wParam As Long, _ lParam As Any) As Long Private Const LB_SETHORIZONTALEXTENT = &H194-----------------------

知识点：整个div而言如果判断滚动条滚动到底部

上篇文章解决的是整个document如果判断滚动条滚动到底部,那么对于文档中的div如果判断div元素滚动条滚动到底部呢? 针对这个问题,结合上文的思路,作者做了测试,经过几轮代码修正和迭代解决了这个问题. 代码如下: <div id="outer"> <div id="inner"> 90908080 </div> </div> <script type="text/javascript"&

JS案例练习 — 给div添加样式选择功能

感觉JS写的比较臃肿,有能力了再回头改过 附加效果图: CSS内容: 1 <style> 2 *{margin:0; padding:0px} 3 li{list-style:none} 4 body{font:24px 'Microsoft YaHei'; color:black} 5 .div0{padding:20px 50px; font-weight: bold;} 6 .div1{margin-bottom: 20px;} 7 .div1 span{font-weight: nor