0

我创建了一个 div，该 div 有两个孩子，一个是ul另一个，div我想滚动该内部 div 和字体的元素以修复ul. 我无法div在内部添加任何其他内容div

代码

<div style="width: 200px; overflow-x: auto; ">
<ul>
    <li>Some data</li>
    <li>some more data </li>
</ul>
<div style="height: 70px; width: 500px">
    <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
    <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
    <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
    <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
    <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
    <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
    <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
    <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
</div>
</div>​

现场演示

4

2 回答 2

1 
<div style="width: 150px; overflow-x: auto;position:relative ">
    <ul style="position:fixed">
        <li>Some data</li>
        <li>some more data </li>
    </ul>
    <div style="height: 100px; width: 500px;margin-top:60px">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
</div>
</div>

演示

于 2012-06-29T06:44:57.967 回答
0

嗨 Rana 检查一下我在你的代码中使用了white-space:nowrap; 财产。这个空白属性将以水平方式继续我们的内联元素......

nowrap是proptery white-space的值，这个nowwrap 值抑制元素中的所有换行符。

<div style="width: 250px; border:1px solid red; ">
    <ul>
        <li>Some data</li>
        <li>some more data </li>
    </ul>
  <div style="border:1px solid black;width:150px;height:70px;overflow-y:hidden;overflow-x:scroll; white-space:nowrap;">

        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">

</div>
</div>

查看演示：- http://jsbin.com/ovazol/edit#html,live

于 2012-06-29T07:23:08.823 回答