css - 阻止 anchor 垂直跳跃

Question

这让我抓狂。

基本上，当我在水平滑动的 div 中使用 anchor 时，我需要阻止页面垂直跳转。目前，页面不仅可以很好地左右跳转，还可以垂直跳转，这是一个大问题。我在这里有一个 fiddle 来解释它:

http://jsfiddle.net/gkp17fap/4/

代码如下所示:

a  {
    color:#ccc;
    padding:8px;
    margin:2px;
    display:block;
}


div.container {
    width:250px;
    height:350px;
    overflow:hidden;
    display:block;
    background:#ccc;
    border:solid 1px #555;
}

div.wide {
    display:block;
    height:350px;
    width:auto;
}

div.inner {
    height:350px;
    width:250px;
    display:inline-block;
    float:left;
}

.blue {
    background:blue;
}

.red {
    background:red;
}

.yellow {
    background:yellow;
}

.green {
    background:green;
}

.white {
    background:white;
}

.black {
    background:black;
}

}

<div class="container">
    
    <div class="wide">
        
        
        <div class="inner blue" id="one">  <a href="#one">ONE</a><br><a href="#two">TWO</a><br><a href="#three">THREE</a><br><a href="#four">FOUR</a><br><a href="#five">FIVE</a><br><a href="#six">SIX</a><br>  </div>
        <div class="inner red" id="two">  <a href="#one">ONE</a><br><a href="#two">TWO</a><br><a href="#three">THREE</a><br><a href="#four">FOUR</a><br><a href="#five">FIVE</a><br><a href="#six">SIX</a><br>  </div>
        <div class="inner yellow" id="three">  <a href="#one">ONE</a><br><a href="#two">TWO</a><br><a href="#three">THREE</a><br><a href="#four">FOUR</a><br><a href="#five">FIVE</a><br><a href="#six">SIX</a><br>  </div>
        <div class="inner green" id="four">  <a href="#one">ONE</a><br><a href="#two">TWO</a><br><a href="#three">THREE</a><br><a href="#four">FOUR</a><br><a href="#five">FIVE</a><br><a href="#six">SIX</a><br>  </div>
        <div class="inner white" id="five">  <a href="#one">ONE</a><br><a href="#two">TWO</a><br><a href="#three">THREE</a><br><a href="#four">FOUR</a><br><a href="#five">FIVE</a><br><a href="#six">SIX</a><br>  </div>
        <div class="inner black" id="six">  <a href="#one">ONE</a><br><a href="#two">TWO</a><br><a href="#three">THREE</a><br><a href="#four">FOUR</a><br><a href="#five">FIVE</a><br><a href="#six">SIX</a><br>   </div>
        
    </div>

</div> 

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>   
        

能想到的都试过了，现在脑子里一片空白。任何人都可以帮助删除该页面垂直跳转吗？

哦，我也希望得到最简单的解释，因为这个元素也将通过 USB key 分发，并且毫无疑问地用于从未正常工作的旧粗略浏览器中。我对那部分非常兴奋。

非常感谢!

Answer 1

问题可能来自两个方向。首先，内部 div 并不是真正向左浮动。 div.wide 有 width: auto;，因为它的父级有一个固定的 250px 宽度，它只占用 100%，所以它也有一个(计算的)宽度为 250px。因此，您的 div.inner 不是彼此左右，而是顶部和底部。

由于您可能无法将固定宽度应用于 div.wide，因为您可能事先不知道在所有情况下会有多少 div.inner，我建议您要么选择一个在所有情况下都足够宽以容纳所有左浮动 div.inner 彼此相邻的宽度，要么通过计算 div.inner 来计算必要的宽度> 并将其乘以 div.inner 的宽度:

$(document).ready(function() {
  var noOfSlides = $(".inner").length;
  var slideWidth = $(".inner").first().width();
  $(".wide).css("width", (noOfSlides * slideWidth)+"px");
});

问题可能来自的第二个方向是页面 anchor 的工作方式。但首先尝试我建议的解决方案并报告它是否适合您。