Question

我需要在我提供HERE 的示例中只进行水平滚动。

现在我知道这里有类似问题的帖子，答案就像{{1}一样简单在CSS中。我试过了，由于某种原因，我没有得到我正在寻找的结果。我想要的只是水平滚动。我需要这样做，以便在HTML文件中添加更多功能和链接时，它不会像在我的jsfiddle中那样下拉。我的整个代码如下所示：

CSS：

{overflow-x:auto; and overflow-y:hidden;}

HTML：

body {
  font-family: "marcellus sc";
}

body p{
  font-family: "trebuchet ms";
  letter-spacing: 2px;
}

.links_wrapper {
  background-color: rgba(246,217,90,0.7);
  border:3px solid #c5a101;
  border-radius: 8px;
  height: 398px;
  width:95%;
  margin:auto;
  text-align: center;
  position: relative;
  padding: 5px;
}

.links_title {
  height: 40px;
  width:98%;
  margin-left: auto;
  margin-right: auto;
  float: left;
  text-align: left;
  font-size: 25px;
  letter-spacing: 4px;
  font-weight: 100;
  text-shadow: 2px 2px 2px #666;
}

.scroll {
  overflow-x: auto;
  overflow-y: auto;
  height: 358px;
  width:98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}

.ind_blocks {
  margin: 0;
  box-sizing: border-box;
  height: 348px;
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  float: left;
  background-color: rgba(248,217,10,0.4);
  padding: 5px;
}

.ind_blocks div {
  padding: 5px;
  box-sizing: border-box;
  height: 100%;
  width:20%;
  float: left;
  background-color: rgba(90,90,90,0.7);
  border: 2px solid #c5a101;
  border-radius: 8px;
}

.ind_blocks div:hover {
  background-color: rgba(10,10,10,0.5);
  color: #ffd000;
}

.ind_blocks div #under_constr {
  padding-bottom: 10px;
  box-sizing: padding-box;
  width: 100%;
  height: 100px;
  display:none;
  top:100px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: auto;
  margin-top: auto;
  z-index: 10;
}

.ind_blocks div:hover > #under_constr {
  display: block;
  color: #fff;
}

div .img_n_text {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: rgba(99,199,249,0.5);
  text-align: center;
}

div .img_n_text img {
  width: 97%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

div .img_n_text h4 {
  margin: 0;
  padding: 2px;
}

div .img_n_text p {
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
  font-weight: 200;
}

我试图主要使用CSS来解决这个问题，并且仅将JavaScript用作最后的手段我究竟做错了什么？或者我错过了什么？

更新：我附上了我应用RCNeil的答案 Here后得到的结果的截图。它仍然没有做我想要的。我目前正在通过其他答案，看看哪一个适合我的需要。我很快就会更新。我很抱歉我的代码混乱而且效率低下。我还在学习细节，有什么比学习更好的方法，对吧？再次感谢你的帮助。

Answer 1

这是一个最简单的案例＆＃34;您尝试完成的效果示例。请注意，这里只有一个div，其子项水平布局并在x轴上滚动。

主要技巧是白色空间：nowrap;在您要滚动的div上，并确保重置white-space：normal;在它的孩子身上，所以文字会像你期望的那样包装。

小提琴：http://jsfiddle.net/n67Gk/

HTML：

<div class="scroll">
    <a href="#">
        This scrolls
    </a>
    <a href="#">
        This scrolls
    </a>
    <a href="#">
        This scrolls
    </a>
    <a href="#">
        This scrolls
    </a>
    <a href="#">
        This scrolls
    </a>
    <a href="#">
        This scrolls
    </a>   
        <a href="#">
        This scrolls
    </a>
    <a href="#">
        This scrolls
    </a>   

</div>

CSS：

body{
    margin:0;
}
body, html{
    width:100%;
    height:100%;
}

.scroll{
    width:100%;
    height:398px;
    overflow-x:auto;
    white-space:nowrap;
}

.scroll a{
    display:inline-block;
    vertical-align:top;
    height:100%;
    width:100px;
    background:#369;
    border-radius:5px;
}

仅使用水平滚动定位嵌套Div

1 个答案: