容器在HTML外面溢出

Question

我正在尝试找出容器右侧的额外间距来自何处，我似乎找不到使用Inspector的html标签外部的元素。<<<<<<<<<<<<<<

实时预览

任何帮助都是appricric的，

预先感谢！

Answer 1

它来自此类

slider-title tk-futura-pt-bold

而不是使用位置，而是留在上类。

使用Follwing重新位置您的DIV（滑块）：

left: 10%;
top: 10%;
transform: translate(10%,10%);

Answer 2

我将slider-box设置为position: relative;并将slider-title设置为position: absolute;这将解决您的问题。

Answer 3

在CSS的末尾编写此代码，您将解决问题:)

.slider-description[_ngcontent-c3], .slider-title[_ngcontent-c3] {
  width: calc(100% - 10%);
}

Answer 4

而不是左：10％; 使用 padding-Left：10％; in > .slider-title tk-futura-pt-bold class

Answer 5

slider-deScription和slider-title的元素还添加了CSS样式。

您可以使用以下内容来解决此问题：

#slider{
    .slider-box {
        position: absolute;
        left: 10%;
        top: 170px;
    }
    .slider-description, .slider-title{
        color: #fff;
    }
    .slider-title {
        font-size: 24px;
    }
    .slider-description{
        width: 500px;
    }
}