Div中放不下如何出现横向滚动条,然后一直排过去。
先上代码StyleSheet.css
#container
{
width: 800px;
margin: 0 auto;
height: 20px;
background-color: #ccc;
overflow: auto;
}
.banner
{
margin-left: 5px;
width: 300px;
height: 20px;
background-color: Fuchsia;
float: left;
}
aspx file
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div class="banner">
123
</div>
<div class="banner">
123
</div>
<div class="banner">
123
</div>
</div>
</form>
</body>
以上代码只能出现纵向滚动条，而且还不能完全在container中完全显示。
我想让这banner3个div在container中横向排，然后出现横向滚动条，谢谢！
最好能有完整的小Demo. --------------------编程问答--------------------
overflow:scroll; /* x y都出现滚动条 */
overflow-x:scroll;/* x出现滚动条*/
overflow-y:scroll;/* y出现滚动条*/
--------------------编程问答--------------------
你试过没？我这不OK。你那边OK？ --------------------编程问答-------------------- 搞定，外面还要再套一层DIV。
#container
{
width: 800px;
margin: 0 auto;
height: 40px;
background-color: #ccc;
overflow-x: scroll;
}
#subcontainer
{
width: 920px;
}
.banner
{
margin-left: 5px;
width: 300px;
height: 20px;
background-color: Fuchsia;
float: left;
}
--------------------编程问答--------------------
<body>
<form id="form1" runat="server">
<div id="container">
<div id="subcontainer">
<div class="banner">
123
</div>
<div class="banner">
123
</div>
<div class="banner">
123
</div>
</div>
</div>
</form>
</body>
#container
{
width: 1800px; //width改大一点就行
margin: 0 auto;
height: 40px;
background-color: #ccc;
overflow-x:scroll;
overflow-y:hidden;
}
补充：.NET技术 , ASP.NET
