CSS float для HTML5 не плавающих элементов видео в контейнере div

Question

Я пытаюсь создать полную ширину HTML5 видео слайдер / карусель. Я просмотрел сеть и не смог ее найти, поэтому решил, что попробую сделать ее сам.

Уже у меня возникают проблемы, когда все должно быть просто. Я пытаюсь разместить видео рядом друг с другом, чтобы я мог вставить их. По какой-то причине мои видео не хотят меня слушать. Вот мой код.

css

.slider{
    list-style: none;
    display: block;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.slider .slide{
    float: left;
    display: block;
    margin: 0;
    padding: 0;
    border-radius: 0px;
    overflow: hidden;
    opacity: 0.15;
    width: 100%;
    cursor: pointer;
    -webkit-transition: opacity 800ms ease-in-out;
    transition: opacity 800ms ease-in-out;
}

.slider .slide.active{
    opacity: 1;
    cursor: default;
    -webkit-transition: opacity 800ms ease-in-out;
    transition: opacity 800ms ease-in-out;
}

html - 5 слайдов в миксе

<div class="slider">

    <div class="slide active">
        <a href="/1.html" class="headerVideoLink">
            <video muted>
                <source src="/videos/trucks-driving.mp4" type="video/mp4">
            </video>
        </a>
    </div>

    <div class="slide">
        <a href="/2.html" class="headerVideoLink">
            <video muted>
                <source src="/videos/money-moving.mp4" type="video/mp4">
            </video>
        </a>
    </div>

    <div class="slide">
        <a href="/3.html" class="headerVideoLink">
            <video muted>
                <source src="/videos/trucks-driving.mp4" type="video/mp4">
            </video>
        </a>
    </div>

    <div class="slide">
        <a href="/4.html" class="headerVideoLink">
            <video muted>
                <source src="/videos/globe-spinning.mp4" type="video/mp4">
            </video>
        </a>
    </div>

    <div class="slide">
        <a href="/5.html" class="headerVideoLink">
            <video muted>
                <source src="/videos/arrow-target.mp4" type="video/mp4">
            </video>
        </a>
    </div>

</div><!-- slider -->

Answer 1

Положение плавающих элементов связано с пространством (шириной), предоставленным родителем. В вашем случае они оба имеют одинаковую ширину (100%). Это объясняет разрыв строки.

Чтобы избежать разрывов строки, правильное свойство CSS для использования - word-break: keep-all; Но это не может работать с плавающими элементами.

Лучшее решение - использовать свойство display: inline-block для .slide и white-space: nowrap; для .slider

Основная проблема inline-block - дополнительное пространство, которое обычно вызывается HTML Сам код отступа. Хорошее решение - добавить font-size: 0 к родителю. В вашем случае это не должно быть проблемой при просмотре видео.

CSS

.slider{
    list-style: none;
    display: block;
    width: 100%;
    overflow: hidden;
    position: relative;
    font-size: 0;
    white-space: nowrap;
}

.slider .slide{
    display: inline-block;
    margin: 0;
    padding: 0;
    border-radius: 0px;
    overflow: hidden;
    opacity: 0.15;
    width: 100%;
    cursor: pointer;
    -webkit-transition: opacity 800ms ease-in-out;
    transition: opacity 800ms ease-in-out;
}

.slider .slide.active{
    opacity: 1;
    cursor: default;
    -webkit-transition: opacity 800ms ease-in-out;
    transition: opacity 800ms ease-in-out;
}