Question

如何使其水平滚动？ HTML

文本

             <a href="html"><div id="right" class="box">
                <p>text</P>
            </div></a>

CSS

#big{
    background-color: red;
    width: 300px;
    height: 250px;
    border: thin solid black;
    overflow-x: show;
    overflow-y: hidden;

} }

.box {
text-align: center;

}

Answer 1

首先，您在css和html DOM元素中声明了不同的ID名称，请注意。

其次，溢出属性没有显示这样的值，请点击此处：http://www.w3schools.com/cssref/css3_pr_overflow-y.asp

HTML

<a href="html">
  <div id="right" class="box">
    <p>text</p> <p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p>
  </div>
</a>

CSS

#right{
    background-color: red;
    width: 3200px;
    height: 250px;
    background: red;
    border: thin solid black;
    overflow-y: scroll;
}

.box {
text-align: center;
}

https://jsfiddle.net/13jh7gjb/2/

我希望它有所帮助，只需删除背景颜色，我已添加为你突出显示div ..

Answer 2

将以下CSS代码添加到容器中。

overflow-x：scroll;

溢出-y：隐藏;

Answer 3

如果我理解您的要求，也许您会在这篇文章中找到答案：

这里是StackOverflow帖子，这里是建议 JSFiddle

＆＃13;

ul { 
     width: 160px;
    display: block;
    white-space: nowrap;
     overflow: auto; 
     }
li { 
     width: 80px;
     display: inline-block;
     }

＆＃13;

<div>
   <ul>
     <li>one</li><li>two</li><li>three</li><li>four</li>
   </ul>
 </div>

＆＃13;

如何使其水平滚动？

3 个答案: