Ioni c элементы списка не полная ширина - PullRequest
Новая
       3

Ioni c элементы списка не полная ширина

0 голосов
/ 25 февраля 2020

Я делаю простое приложение Ioni c для друга, оно состоит из двух простых страниц. Я не настолько хорошо разбираюсь в HTML и CSS, но я стараюсь обойти это.

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

Вот соответствующий (я думаю) HTML код: 

    <ion-list class="list" lines="none" inset="false">
        <ion-item button *ngFor="let item of (results | async)" [routerLink]="['/', 'item', item.imdbID]" detail="false">
            <div class="card">
                <img class="img" src="https://br.web.img3.acsta.net/medias/nmedia/18/83/56/27/20121066.jpg">
                <div class="background-transparent">
                    <ion-label class="list-item-title">{{ item.Title }}</ion-label>
                </div>
            </div>
        </ion-item>
    </ion-list>

Вот соответствующий (снова я думаю) CSS код: 

.list {
    width: 120%;
    margin-top: 10px;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    .card {
        margin: 0;
        background: black;
        .img {
            width: 110%;
            padding: 0;
        }
        .list-item-title {
            font: 15px arial, sans-serif;
            position: absolute;
            /* Position the background text */
            bottom: 0;
            /* At the bottom. Use top:0 to append it to the top */
            background: rgb(0, 0, 0);
            /* Fallback color */
            background: rgba(0, 0, 0, 0.7);
            /* Black background with 0.5 opacity */
            color: #f1f1f1;
            /* Grey text */
            width: 100%;
            /* Full width */
            padding: 7px;
            /* Some padding */
        }
    }
}

Вот фотография того, как сейчас:

Соответствующая часть экрана

Спасибо за любую помощь.

...