Question

我创建了一个div有两个孩子，其中div为ul而另一个是div我想滚动内部div和字体的元素来修复{{1} }。我无法在内部ul

周围添加任何其他div

代码

div

Live Demo

Answer 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>

DEMO

Answer 2

嗨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

滚动内部子div

2 个答案: