Не работает свойство overflow-x:scroll; css,что делаю не так?
{% block pagename %} <h1>Home</h1> {% endblock pagename %} {% block page %} <div class = 'pages'> <div class="home-page"> </div> <div class="admin-page"> </div> <div class="profile-page"> </div> <div class="cloths-page"> </div> <div class="privacy-page"> </div> </div> {% endblock page %} |
{% block pagename %} <h1>Home</h1> {% endblock pagename %} {% block page %} <div class = 'pages'> <div class="home-page"> </div> <div class="admin-page"> </div> <div class="profile-page"> </div> <div class="cloths-page"> </div> <div class="privacy-page"> </div> </div> {% endblock page %}
css
.pages{ width: 100%; height: 120px; display: flex; flex-direction: row; align-items: center; justify-content: space-around; background: transparent; overflow-x:scroll; } .admin-page, .cloths-page, .profile-page, .privacy-page, .home-page{ border-radius: 10px; width: 120px; height: 100%; background: url(anime-grust-noragami-4.gif)no-repeat; background-size: cover; background-position: center; } |
.pages{ width: 100%; height: 120px; display: flex; flex-direction: row; align-items: center; justify-content: space-around; background: transparent; overflow-x:scroll; } .admin-page, .cloths-page, .profile-page, .privacy-page, .home-page{ border-radius: 10px; width: 120px; height: 100%; background: url(anime-grust-noragami-4.gif)no-repeat; background-size: cover; background-position: center; }
Дополнительно:
Если мой хрустальный шар прав, то нужно добавить flex-shrink: 0; для элементов, которые внутри flex контейнера, чтобы ваш width: 120px; применился...
- пасибо большое!!!!
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, с которой вы сталкиваетесь, связана с тем, что свойство overflow-x:scroll; в CSS не работает должным образом. Это может быть вызвано несколькими причинами, и я расскажу вам, что можно сделать, чтобы исправить эту проблему.
1. Проверьте правильность написания свойства. Убедитесь, что вы правильно указали значение для свойства overflow-x. Например, должно быть написано overflow-x: scroll; без лишних пробелов или опечаток.
2. Проверьте, что у элемента, к которому применяется свойство overflow-x:scroll;, есть достаточно контента, чтобы появилась горизонтальная прокрутка. Если контента недостаточно, прокрутка может не появиться.
3. Убедитесь, что у родительского элемента нет свойства overflow: hidden;, которое может скрывать прокрутку. Если такое свойство есть, измените его на overflow: auto; или overflow: scroll;.
4. Проверьте другие стили, которые могут перекрывать свойство overflow-x:scroll;. Иногда другие стили могут повлиять на работу прокрутки, поэтому убедитесь, что нет конфликтующих правил.
5. Используйте инструменты разработчика в браузере, чтобы отследить, какие стили применяются к элементу и почему свойство overflow-x:scroll; не работает. Это поможет вам быстрее найти и исправить проблему.
Применяя эти рекомендации, вы сможете исправить проблему с свойством overflow-x:scroll; в CSS и успешно добавить горизонтальную прокрутку к вашему элементу. Если у вас останутся какие-либо вопросы или проблемы, не стесняйтесь задавать дополнительные вопросы.