Question

编辑：哎呀我在处理实际项目时忘记打开控制台以清除缓存。以前的解决方案和你建议的解决方案都很好。谢谢你们

因此，当其他内联保持静止时，我正试图将某些内容滑出。然而，滑动将其他元素向下推下。

这是基本的HTML：

<div id="title-container">
  <h1 class="inline-header">Example.</h1>
  <h1 id="sliding-text" class="inline-header">slide</h1>
</div>
<button id="slideButton">SLIDE</button>

我尝试了通过搜索找到的其他解决方案，但它们似乎无法正常工作。例如，给外部容器一个固定的高度，隐藏溢出，将防止滑块向下推动外部元素，但是当右侧下降时向上推左（静态）文本。这是一个JSFiddle，显示我的原始代码中发生了什么。

https://jsfiddle.net/9hj6y79k/11/

基本上我只是希望右侧滑出而不移动任何其他东西。

我希望该位置保持相对（而不是将其全部转换为绝对定位），但如果切换到绝对是最好的方法，我不会反对。有人可以帮忙吗？谢谢！

Answer 1

你需要添加overflow：hidden;在css

https://jsfiddle.net/9hj6y79k/12/

id

Answer 2

将您的css类更改为：

.inline-header {
  display: inline-block;overflow:hidden;
}

#title-container {
  position: relative;
  left: 40%;
}

https://jsfiddle.net/9hj6y79k/13/

JQuery UI Slide推送元素，其他解决方案似乎不起作用

2 个答案: