请问下列表的布局问题

sohighthesky 2009-09-01 10:19:14

淘宝的这个效果：

可以到http://sell.taobao.com/auction/publish/publish.htm?auction_type=b&auth_alert=true
这里看，
我看淘宝是用ol和li布局的，将li的float设成left之后可以横向显示，请问下怎么能让他那个样式宽了之后是隐藏，而不是直接换行呢？

...全文

113 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

sohighthesky 2009-09-02

打赏
举报

还有人来看看吗？三楼加了个div不行，因为宽度不能固定，里面的数量是不定的，而且那样只有显示滚动条，不能hidden了

sohighthesky 2009-09-02

打赏
举报

[Quote=引用 6 楼 xinyung 的回复:]
请问如果没有一个够长的容器去装载，又如何使1-10div在一行中显示？
要hidden，可以在父容器中加 <div class="round1" style="overflow:hidden;
[/Quote]
如果用一个table，这样增加td的话就一直不会换行的，
但是淘宝都用ol li做出来了的啊

sohighthesky 2009-09-02

打赏
举报

我把外面加了个hidden，里面的内容加宽了，这样差不多显示的时候可以了：
可以如果里面的是一个固定的宽度的话，
我是想控制scrollLeft来显示内容，这样根本没办法判断在什么情况下不能在往右移了，

xinyung 2009-09-02

打赏
举报

请问如果没有一个够长的容器去装载，又如何使1-10div在一行中显示？
要hidden，可以在父容器中加<div class="round1" style="overflow:hidden;

xinyung 2009-09-01

打赏
举报

<html>

<head>

    <title> Test Page</title>

    <style type="text/css">

    body,tr,td{

        font-size:10pt;

    }

    ol,ul {

        margin:0;

        padding:0;

    }

    li {

        float:left;

    }

    li div {

        width:150px;

        height:200px;

        border:solid 1px #06c;

    }

    </style>

</head>

<body>

    <div class="round1" style="overflow:auto;border:solid 1px #8FC0E9;width:800px;height:400px;-moz-border-radius:4px">

    	<div style="width:1500px;">

    <ol>

    <li><div>1</div></li>

    <li><div>2</div></li>

    <li><div>3</div></li>

    <li><div>4</div></li>

<li><div>5</div></li>

<li><div>6</div></li>

<li><div>7</div></li>

<li><div>8</div></li>

<li><div>9</div></li>

<li><div>10</div></li>

<li><div>11</div></li>

<li><div>12</div></li>

<li><div>13</div></li>

</ol></div>

    </div>    

</body>

</html>

sohighthesky 2009-09-01

打赏
举报

就是下面的html，我想让1-10的div排成一行，到一行里面显示，可以hidden或者滚动条都行



<html>

<head>

	<title> Test Page</title>

	<style type="text/css">

	body,tr,td{

		font-size:10pt;

	}

	ol,ul {

		margin:0;

		padding:0;

	}

	li {

		float:left;

	}

	li div {

		width:150px;

		height:200px;

		border:solid 1px #06c;

	}

	</style>

</head>

<body>

	<div class="round1" style="overflow:hidden;border:solid 1px #8FC0E9;width:800px;height:400px;-moz-border-radius:4px">

	<ol>

	<li><div>1</div></li>

	<li><div>2</div></li>

	<li><div>3</div></li>

	<li><div>4</div></li>

<li><div>5</div></li>

<li><div>6</div></li>

<li><div>7</div></li>

<li><div>8</div></li>

<li><div>9</div></li>

<li><div>10</div></li>

<li><div>11</div></li>

<li><div>12</div></li>

<li><div>13</div></li>

</ol>

	</div>	

</body>

</html>