CSS Nav 按钮移动左下角

【问题标题】：CSS Nav buttons move bottom leftCSS Nav 按钮移动左下角
【发布时间】：2016-09-01 22:02:29
【问题描述】：

导航按钮位于图像标题 div 的顶部。两者都在悬停时下拉。转到下一个图像时，导航按钮位于正确的位置，但是当您单击上一个时，整个导航屏幕将移动到右下角！

  nav {
         position: absolute;
  width: 100%
  height: 20px;
  padding-bottom: 2px;
  z-index: 1;
  float: right;
  margin-top: -20px;
  transition: margin-top 200ms ease-in;
  background: black;
  opacity: 0.4;
  right: 1px;

}
.title {
  position: absolute;
  width: 85%;
  height: 20px;
  padding-bottom: 2px;
  margin-top: -25px;
  transition: margin-top 200ms ease-in;
  background: black;
  color: white;
  opacity: 0.6;
}

.title-text {
  float: left;
  padding-left: 5px;
}

.slides:hover .title {
   margin-top: 0px;
}

这里是link 给一个小提琴。

【问题讨论】：

你那里有很多错误..缺少分号，属性不包括自己..

标签： css

【解决方案1】：

我修复了这部分，但代码本身很笨拙

无论如何，这里仍然是示例：jsfiddle

首先你忘记了“;”在.nav { 在height 和width 之间其次不要使用 position: absolute 和 float 它相互排斥尝试像您的按钮一样连接类似的classes

.btn-prev,
.btn-next{
  color: black;
  background:white;
  border: 2px solid white;
  margin: 0px 5px 0px 0px;
  cursor: pointer;
  padding: 0px 5px 0px 5px;
  display: inline-block;
}

快速解释一下，我在.nav 元素上设置了text-align，因此按钮将设置在.nav 和.btn-* 内的右侧，用于display: inline-block;（默认 display: block; 所以它的行为类似于文本。

【讨论】：