Question

只是一个小的HTML / CSS问题：

导航到“Leistungen”时，

This Website水平跳跃。我将问题隔离开来：只有在

中有内容时才会发生

<div id="box1">  and  <div id="box2">

但我只使用<h3>，<ul>和<li>，所以我找不到错误。

提前致谢

Answer 1

听起来你只想确保滚动条始终可见（这是唯一的＆＃34;跳转＆＃34;我可以看到）。要解决此问题，您可以将以下内容添加到CSS中：

html {
       overflow-y: scroll;
}

这将确保滚动条始终存在，因此不应该跳转。

Answer 2

从“Arzte”转到“Leistungen”时，您的页面才会移动，因为它添加了滚动条，因为“Leistungen”上有很多内容而“Artze”上没有太多内容。这是你的意思吗？

Answer 3

这个答案是偏离主题的，因为问题是关于滚动条没有包装，事实证明。我现在就在这里留下答案，因为它可以解决这个问题，作为滚动条的替代方案。

据我所知，问题是css中没有任何内容可以让你的＆＃34; box1＆＃34;，＆＃34; box2＆＃34;等对象换行，所以当你缩放时因此，最右边的图片超出了屏幕的边缘。您可以通过添加display：inline-block来解决问题。财产到css。

这是关于main.css中这些对象的CSS：

#mycontainer p
{
    font-size: 0.75em;
    text-align: left;
    line-height: 1.5em;
}


#box1
{
    margin-right: 1em; margin-bottom: 5em;
}
#box2
{
    margin-right: 1em; margin-bottom: 5em;
}
#box3
{
    margin-right: 1em; margin-bottom: 5em;
}
#box4
{
    margin-right: 1em; margin-bottom: 5em;
}

这里没有任何东西可以让盒子包裹起来。您可以使用display：inline-block实现所需的效果，如下所示：

<!DOCTYPE html>
<html>
<head>
<style>

.img_box
{
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21; 
    display: inline-block;
}

</style>
</head>
<body>

<h2>Boxes</h2>

<div class="img_box">Floating box</div>
<div class="img_box">Floating box</div>
<div class="img_box">Floating box</div>
<div class="img_box">Floating box</div>

</body>
</html>

这是小提琴，所以你可以看到它的工作原理：https://fiddle.jshell.net/m67zftfk/

基本上，只需在css中将＃box1，＃box2，＃box3，＃box4设为display: inline-block;和width: some_width; height: some_height; margin: some_margin;即可。

inline-block使元素内联，但也允许包含高度和宽度：当元素超出屏幕边缘时，浏览器将它们包装起来。但是，您需要提供尺寸参数才能正常工作。

网站水平跳跃

3 个答案: