2016-11-03 71 views
0

如何让它水平滚动? 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; 

}

+0

你能否解释一下什么样的建议你要吗 ? – Rohit

+0

滚动什么?我的意思是,你想滚动什么? –

+2

你的html中的#big在哪里? – GvM

回答

0

首先,您在CSS和html DOM元素中声明了不同的ID名称,请注意这一点。

其次,有没有这样的价值展现给overflow属性,点击这里: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。

+1

这是垂直滚动,OP要水平 – GvM

+0

@GvM谢谢,已经纠正。 –

0

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

overflow-x:scroll;

overflow-y:hidden;

0

如果我明白你的要求,也许你会发现在这个岗位你的答案:

这里StackOverflow后,这里 JSFiddle

ul { 
 
    width: 160px; 
 
    display: block; 
 
    white-space: nowrap; 
 
    overflow: auto; 
 
    } 
 
li { 
 
    width: 80px; 
 
    display: inline-block; 
 
    }
<div> 
 
    <ul> 
 
    <li>one</li><li>two</li><li>three</li><li>four</li> 
 
    </ul> 
 
</div>

+0

感谢它的工作原理以及我正在寻找的东西 – noooooooo