Question

正如您在此Fiddle中看到的那样，幻灯片元素和右箭头元素之间存在一个尴尬的间距，此间距实际上会随着浏览器调整大小而改变。

如何摆脱这种间距并使所有东西紧密贴合？

请注意，我不想使包装器（整个滑块）的宽度固定（我希望它是相对的），因为即使浏览器变小，我也希望看到整个滑块。但是，我希望每个幻灯片元素都有一个固定的宽度。

我尝试在CSS中添加以下内容，但这没有帮助。

.next-slide, .prev-slide {
    padding-right: -1px;
    margin-right: -1px;
}

Answer 1

要达到预期用途

将上一个和下一个幻灯片箭头部分的宽度更新为54px

的.next滑动， .prev-slide { 背景：黑色; 显示：块; 宽度：54px;
将标签容器的边距增加到53px

.wrapper .tab-container { 保证金：0 53px;

3.Tab container li padding right to 24px

.wrapper .tab-container li {
  font: normal 14px 'Arial';
  background: lightgrey !important;
  margin: 0 !important;
  padding: 15px 24px;

CSS：

.wrapper {
  overflow: hidden;
  width: 100%;
  background: grey;
  position: relative;
  height: 50px;
  margin-top: 15px;
}

.next-slide,
.prev-slide {
  background: black;
  display: block;
  width: 54px;
  height: 50px;
  position: absolute;
  top: 0;
  color: white;
  text-align: center;
  line-height: 3em;
  cursor: pointer;
  transition: background .3s ease-in-out, left .3s ease-in-out, right .3s ease-in-out;
  -webkit-transition: background .3s ease-in-out, left .3s ease-in-out, right .3s ease-in-out;
  -moz-transition: background .3s ease-in-out, left .3s ease-in-out, right .3s ease-in-out;
  z-index: 2;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.next-slide{
  right: 0;
}

.wrapper .tab-container {
  margin: 0 53px;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  transition: left .3s ease-in-out;
  -webkit-transition: left .3s ease-in-out;
  -moz-transition: left .3s ease-in-out;
}

.wrapper .tab-container li {
  font: normal 14px 'Arial';
  background: lightgrey !important;
  margin: 0 !important;
  padding: 15px 24px;
  list-style: none;
  float: left;
  border-right: 1px solid #fff;
  height: 50px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  z-index: 1;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.wrapper .tab-container li a {
  background-image: none !important;
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  color: #222;
}

.wrapper .tab-container li a span {
  background-image: none !important;
  /*background-repeat: 0 !important;*/
  background-position: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.wrapper .tab-container li.here,
.wrapper .tab-container li.here a {
  font-weight: normal !important;
  color: #00ac7f !important;
}

https://jsfiddle.net/Nagasai_Aytha/dd4h4uch/5/

Answer 2

希望我没有误解你的期望，但我相信你指的是这样一种方式，如果你缩小和扩展你的浏览器，你会看到最终幻灯片出现并消失，因为它是否完全适合可见区域，并且一定量的灰色背景空间始终可见。为此，我做了以下事情：

在float: left

display: inline-block

要计算出它们之间出现的额外空格，请将font-size: 0添加到.tab-container（每个li设置字体大小，这样只会删除不需要的空格）
要防止换行，请将white-space: nowrap添加到.tab-container。（在开发人员工具中，您可以看到非拟合元素正在移动到下一行）

在水平滑块中固定间距的简便方法

2 个答案: