Как я могу стилизовать границу div, чтобы она выглядела l ie на изображении ниже - PullRequest
Новая
       2

Как я могу стилизовать границу div, чтобы она выглядела l ie на изображении ниже

0 голосов
/ 17 июня 2020

Я хочу стилизовать свой div до границы, чтобы он выглядел как на изображении ниже, это div с тегами ul и li с изображениями внутри, вот мой код

test.page.s css 

.renderList{
    position: relative;
    bottom: 1%;
    border: red;
}
ul {
    display: table;
    width: 100%;
    list-style-type: none;
    height: 9% !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
}
li {
    float: left;
    display: table-cell;
}
img{
    height: 50px !important;
}

test.page. html

<div id="renderList">
            <ul class="bb">
                <li *ngFor="let img of Imgs">
                    <img [style.width.px]="PixWidth" [src]="img.imgUrl"/>
                </li>
            </ul>           
            <div class="wrap" role="group" aria-labelledby="multi-lbl">
                <label class="sr-only" for="a">Value A:</label>
                <input (change)="onChangeVal(1)" name="min" id="a" type="range" min="0" [max]="VidDuration" [(ngModel)]="range.min"/>
                <label class="sr-only" for="b">Value B:</label>
                <input (change)="onChangeVal(2)" name="max" id="b" type="range" min="0" [max]="VidDuration" [(ngModel)]="range.max"/>
            </div>
        </div>

вот изображение, которое я хочу, чтобы моя граница div выглядела как The Image

Как стилизовать границу div, чтобы она выглядела так

1 Ответ

1 голос
/ 17 июня 2020

Посмотрите здесь , я добавил границу и несколько элементов, чтобы они выглядели так, как будто они есть на изображении.

В основном я создал пустые div элементы для боковых элементов с pseudo-elements для белой линии внутри.

Надеюсь, это поможет.

...