【问题标题】:My previous and Next button tend to fluctuate up and down when moving to the next page with a larger body of words我的上一个和下一个按钮在移动到具有大量字词的下一页时往往会上下波动
【发布时间】:2017-06-23 22:48:56
【问题描述】:

所以,我的按钮遇到了一个小问题,基本上,当我单击下一个按钮并且页面有更多正文时,按钮往往会垂直向下移动并返回向上,页面上的单词更少。

.azibsButtons {
  padding-top: 100px;
  padding-left: 10px;
  padding-right: 10px;
}
<div class="azibsButtons">
  <button type="button" id="previous" class="btn btn-primary pull-left">Prev</button>

  <button type="button" id="next" class="btn btn-primary pull-right">Next</button>

  <button type="button" id="submit" class="btn btn-primary pull-right">Submit</button>
</div>

我需要按钮稳定在一个位置。

【问题讨论】:

  • 尝试在 .azibsButtons 上使用 position:absolute
  • 不,它没有帮助,按钮连接在一起并且仍然垂直上下移动@Chiller
  • 尝试为内容区域添加高度并设置为overflow-y:scroll
  • 你需要指定位置top/left ..尝试添加top 50px;例如
  • 是的,我试过了,但按钮仍然上下移动

标签: jquery html css button padding


【解决方案1】:

如果我理解正确,即使页面正确加载新文本,您也希望修复按钮?

如果内容不包含在某种(框架)中,那么按钮会根据文本的长度上下移动,这就是网络的工作方式。

但您可以设置文本容器的高度height: 200px; 并允许滚动条使用 overflow-y: scroll;这种方式现在不管文本多长容器高度都是固定的

【讨论】:

  • 我在上面放了一个高度,现在按钮不动了!伟大的!但是溢出是什么:滚动;我需要吗?
  • 好的高度:200px;有效,但是当我刷新页面时,它又回到了原来的样子。为什么是高度:200px;不保存?
  • 如果文本太大,太大overflow-y: scroll 将在右侧放置一个滚动条,以便文本包含在该元素(div?)中,将其视为一个框架,如果您知道文本不会太长,那么将 height 设置为具有少量额外像素就可以解决问题
  • 为什么我的身高没有节省?一旦我刷新我的身高:200px;恢复正常@kapreski
  • 能否在jsfiddle.net/sxvsc0t0 中添加整个页面的 css 和 html(无敏感信息)并保存,以便我提供帮助
【解决方案2】:

好的,我们开始吧。所以你不希望按钮移动,所以我想出的解决方案是在你的文本周围放置 div 元素:

<div class="text">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus porta lectus at elementum. Morbi purus ligula, vestibulum nec accumsan id, dignissim vestibulum leo. Vestibulum eu sapien eros. Phasellus tristique convallis tortor in ornare. Duis euismod lectus enim. Vestibulum pulvinar felis eget ex posuere molestie. Phasellus molestie magna at orci elementum blandit. Curabitur laoreet molestie sapien, in rutrum purus sollicitudin vel.

    </p>
</div>

然后创建一个类,在本例中为文本。

.text {
  width: auto;
  height: 500px;
}

这应该设置为最大文本的最大高度。这是我的fiddle

【讨论】:

  • 我要试试
  • 你能再解释一下吗?就像什么不工作等
  • 一切正常,只是按钮中的按钮不希望它们移动。现在已经修复了,谢谢
猜你喜欢
  • 2012-10-25
  • 2021-01-25
  • 2015-05-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-08-19
相关资源
最近更新 更多