Блог

Главная - Вопросы по программированию - список меню: некоторые пункты не отображаются

список меню: некоторые пункты не отображаются

#css

Вопрос:

У меня есть 11 пунктов для отображения в моем меню, и я вижу только 9 элементов.

Пример:

введите описание изображения здесь

Есть ли способ адаптировать список меню в соответствии с экраном?

Я думаю, что уменьшить размер шрифта-это, может быть, решение для решения моей проблемы?

Я не знаю, есть ли у вас лучшее решение?

Я делюсь с вами своим кодом HTML/CSS.

Большое вам спасибо за вашу помощь.

 /* Add application styles amp; imports to this file! */  @import '~bootstrap/dist/css/bootstrap.css'; @import url('https://fonts.googleapis.com/css?family=Varela Round'); @import '~font-awesome/css/font-awesome.css';  html, body {  overflow-x: hidden;  height: 100%; } body {  background: #fff;  padding: 0;  margin: 0;  font-family: 'Varela Round', sans-serif; } .header {  display: block;  margin: 0 auto;  width: 100%;  max-width: 100%;  box-shadow: none;  background-color: cornflowerblue;  position: fixed;  height: 60px !important;  overflow: hidden;  z-index: 10; } .main {  margin: 0 auto;  display: block;  height: 100%;  margin-top: 60px; } .mainInner {  display: table;  height: 100%;  width: 100%;  text-align: center; } .mainInner div {  display: table-cell;  vertical-align: middle;  font-size: 3em;  font-weight: bold;  letter-spacing: 1.25px; } #sidebarMenu {  height: 100%;  position: fixed;  left: 0;  width: 250px;  margin-top: 60px;  transform: translateX(-250px);  transition: transform 250ms ease-in-out;  /* background: linear-gradient(180deg, #FC466B 0%, #3F5EFB 100%); */  background-color: cornflowerblue; } .sidebarMenuInner {  margin: 0;  padding: 0;  border-top: 1px solid rgba(255, 255, 255, 0.1); } .sidebarMenuInner li {  list-style: none;  color: #fff;  text-transform: uppercase;  font-weight: bold;  padding: 20px;  cursor: pointer;  border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .sidebarMenuInner li span {  display: block;  font-size: 14px;  color: rgba(255, 255, 255, 0.5); } .sidebarMenuInner li a {  color: #fff;  text-transform: uppercase;  font-weight: bold;  cursor: pointer;  text-decoration: none; } input[type='checkbox']:checked ~ #sidebarMenu {  transform: translateX(0); }  input[type='checkbox'] {  transition: all 0.3s;  box-sizing: border-box;  display: none; } .sidebarIconToggle {  transition: all 0.3s;  box-sizing: border-box;  cursor: pointer;  position: absolute;  z-index: 99;  height: 100%;  width: 100%;  top: 22px;  left: 15px;  height: 22px;  width: 22px; } .spinner {  transition: all 0.3s;  box-sizing: border-box;  position: absolute;  height: 3px;  width: 100%;  background-color: #fff; } .horizontal {  transition: all 0.3s;  box-sizing: border-box;  position: relative;  float: left;  margin-top: 3px; } .diagonal.part-1 {  position: relative;  transition: all 0.3s;  box-sizing: border-box;  float: left; } .diagonal.part-2 {  transition: all 0.3s;  box-sizing: border-box;  position: relative;  float: left;  margin-top: 3px; } input[type='checkbox']:checked ~ .sidebarIconToggle gt; .horizontal {  transition: all 0.3s;  box-sizing: border-box;  opacity: 0; } input[type='checkbox']:checked ~ .sidebarIconToggle gt; .diagonal.part-1 {  transition: all 0.3s;  box-sizing: border-box;  transform: rotate(135deg);  margin-top: 8px; } input[type='checkbox']:checked ~ .sidebarIconToggle gt; .diagonal.part-2 {  transition: all 0.3s;  box-sizing: border-box;  transform: rotate(-135deg);  margin-top: -9px; } 
 lt;!DOCTYPE htmlgt; lt;htmlgt;  lt;headgt;  lt;titlegt;HTML CSS JSlt;/titlegt;  lt;/headgt;  lt;bodygt;  lt;div class="header"gt;lt;/divgt;  lt;input type="checkbox" class="openSidebarMenu" id="openSidebarMenu" /gt;  lt;label for="openSidebarMenu" class="sidebarIconToggle"gt;  lt;div class="spinner diagonal part-1"gt;lt;/divgt;  lt;div class="spinner horizontal"gt;lt;/divgt;  lt;div class="spinner diagonal part-2"gt;lt;/divgt;  lt;/labelgt;  lt;div id="sidebarMenu"gt;  lt;ul class="sidebarMenuInner"gt;  lt;ligt;  lt;a routerLink="account-opening"gt;  lt;i class="fa fa-key"gt;lt;/igt;Ouverture d'un comptelt;/a  gt;  lt;/ligt;  lt;ligt;  lt;a routerLink="portfolio"gt;  lt;i class="fa fa-credit-card"gt;lt;/igt;Selection d'un portefeuillelt;/a  gt;  lt;/ligt;  lt;ligt;  lt;a routerLink="corporate-action"gt;  lt;i class="fa fa-key"gt;lt;/igt;Corporate actionslt;/a  gt;  lt;/ligt;  lt;ligt;  lt;a routerLink="visualization-deposit"gt;  lt;i class="fa fa-credit-card"gt;lt;/igt;Visualisation des dépôtslt;/a  gt;  lt;/ligt;  lt;ligt;  lt;a routerLink="value"gt; lt;i class="fa fa-key"gt;lt;/igt;Valeurslt;/agt;  lt;/ligt;  lt;ligt;  lt;a routerLink="indice-boursier"gt;  lt;i class="fa fa-credit-card"gt;lt;/igt;Indices Boursierslt;/a  gt;  lt;/ligt;  lt;ligt;  lt;a routerLink="devise"gt; lt;i class="fa fa-key"gt;lt;/igt;Deviseslt;/agt;  lt;/ligt;  lt;ligt;  lt;a routerLink="valuable-table"gt;  lt;i class="fa fa-credit-card"gt;lt;/igt;Tableau de valeurslt;/a  gt;  lt;/ligt;  lt;ligt;  lt;a routerLink="form-create"gt;  lt;i class="fa fa-credit-card"gt;lt;/igt;Création formulairelt;/a  gt;  lt;/ligt;  lt;ligt;  lt;a routerLink="form-delete"gt;  lt;i class="fa fa-credit-card"gt;lt;/igt;Suppresion formulairelt;/a  gt;  lt;/ligt;  lt;ligt;  lt;a routerLink="form-follow-up"gt;  lt;i class="fa fa-credit-card"gt;lt;/igt;Suivi formulairelt;/a  gt;  lt;/ligt;  lt;/ulgt;  lt;/divgt;  lt;/bodygt; lt;/htmlgt;

Комментарии:

1. Удалите высоту: 100%; положение: исправлено; из #sidebarMenu, и вам будет разрешено прокручивать и просматривать все элементы.

2. Есть ли способ адаптировать список меню в соответствии с экраном? Да, есть такое fit-content свойство. Кроме того, поскольку вы установили высоту:100% в большинстве ваших элементов. И во многих сценариях вам может потребоваться overflow собственность. Лучше всего изучить несколько адаптивных курсов, которые мы разрабатываем, и при необходимости двигаться вперед, вы можете использовать min-height вместо этого, в соответствии с вашими требованиями. Есть так много способов справиться и с этими сенариями. Вы можете использовать flexbox или сетки для правильной настройки макета и настройки элементов. Счастливого Кодирования! Ваше здоровье !

Ответ №1:

Одной из возможностей было бы увеличить width #sidebarMenu число, чтобы поместить все элементы в одну строку каждый, и уменьшить верхнюю и нижнюю padding части элементов списка ( .sidebarMenuInner li ). Также transform параметр #sidebarMenu должен быть адаптирован к translateX(-310px) (или к любому значению, которое вы выбрали width ) в этом случае:

 /* Add application styles amp; imports to this file! */  @import '~bootstrap/dist/css/bootstrap.css'; @import url('https://fonts.googleapis.com/css?family=Varela Round'); @import '~font-awesome/css/font-awesome.css';  html, body {  overflow-x: hidden;  height: 100%; } body {  background: #fff;  padding: 0;  margin: 0;  font-family: 'Varela Round', sans-serif; } .header {  display: block;  margin: 0 auto;  width: 100%;  max-width: 100%;  box-shadow: none;  background-color: cornflowerblue;  position: fixed;  height: 60px !important;  overflow: hidden;  z-index: 10; } .main {  margin: 0 auto;  display: block;  height: 100%;  margin-top: 60px; } .mainInner {  display: table;  height: 100%;  width: 100%;  text-align: center; } .mainInner div {  display: table-cell;  vertical-align: middle;  font-size: 3em;  font-weight: bold;  letter-spacing: 1.25px; } #sidebarMenu {  height: 100%;  position: fixed;  left: 0;  width: 310px;  margin-top: 60px;  transform: translateX(-310px);  transition: transform 250ms ease-in-out;  /* background: linear-gradient(180deg, #FC466B 0%, #3F5EFB 100%); */  background-color: cornflowerblue; } .sidebarMenuInner {  margin: 0;  padding: 0;  border-top: 1px solid rgba(255, 255, 255, 0.1); } .sidebarMenuInner li {  list-style: none;  color: #fff;  text-transform: uppercase;  font-weight: bold;  padding: 10px 20px;  cursor: pointer;  border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .sidebarMenuInner li span {  display: block;  font-size: 14px;  color: rgba(255, 255, 255, 0.5); } .sidebarMenuInner li a {  color: #fff;  text-transform: uppercase;  font-weight: bold;  cursor: pointer;  text-decoration: none; } input[type='checkbox']:checked ~ #sidebarMenu {  transform: translateX(0); }  input[type='checkbox'] {  transition: all 0.3s;  box-sizing: border-box;  display: none; } .sidebarIconToggle {  transition: all 0.3s;  box-sizing: border-box;  cursor: pointer;  position: absolute;  z-index: 99;  height: 100%;  width: 100%;  top: 22px;  left: 15px;  height: 22px;  width: 22px; } .spinner {  transition: all 0.3s;  box-sizing: border-box;  position: absolute;  height: 3px;  width: 100%;  background-color: #fff; } .horizontal {  transition: all 0.3s;  box-sizing: border-box;  position: relative;  float: left;  margin-top: 3px; } .diagonal.part-1 {  position: relative;  transition: all 0.3s;  box-sizing: border-box;  float: left; } .diagonal.part-2 {  transition: all 0.3s;  box-sizing: border-box;  position: relative;  float: left;  margin-top: 3px; } input[type='checkbox']:checked ~ .sidebarIconToggle gt; .horizontal {  transition: all 0.3s;  box-sizing: border-box;  opacity: 0; } input[type='checkbox']:checked ~ .sidebarIconToggle gt; .diagonal.part-1 {  transition: all 0.3s;  box-sizing: border-box;  transform: rotate(135deg);  margin-top: 8px; } input[type='checkbox']:checked ~ .sidebarIconToggle gt; .diagonal.part-2 {  transition: all 0.3s;  box-sizing: border-box;  transform: rotate(-135deg);  margin-top: -9px; } 
 lt;!DOCTYPE htmlgt; lt;htmlgt;  lt;headgt;  lt;titlegt;HTML CSS JSlt;/titlegt;  lt;/headgt;  lt;bodygt;  lt;div class="header"gt;lt;/divgt;  lt;input type="checkbox" class="openSidebarMenu" id="openSidebarMenu" /gt;  lt;label for="openSidebarMenu" class="sidebarIconToggle"gt;  lt;div class="spinner diagonal part-1"gt;lt;/divgt;  lt;div class="spinner horizontal"gt;lt;/divgt;  lt;div class="spinner diagonal part-2"gt;lt;/divgt;  lt;/labelgt;  lt;div id="sidebarMenu"gt;  lt;ul class="sidebarMenuInner"gt;  lt;ligt;  lt;a routerLink="account-opening"gt;  lt;i class="fa fa-key"gt;lt;/igt;Ouverture d'un comptelt;/a  gt;  lt;/ligt;  lt;ligt;  lt;a routerLink="portfolio"gt;  lt;i class="fa fa-credit-card"gt;lt;/igt;Selection d'un portefeuillelt;/a  gt;  lt;/ligt;  lt;ligt;  lt;a routerLink="corporate-action"gt;  lt;i class="fa fa-key"gt;lt;/igt;Corporate actionslt;/a  gt;  lt;/ligt;  lt;ligt;  lt;a routerLink="visualization-deposit"gt;  lt;i class="fa fa-credit-card"gt;lt;/igt;Visualisation des dépôtslt;/a  gt;  lt;/ligt;  lt;ligt;  lt;a routerLink="value"gt; lt;i class="fa fa-key"gt;lt;/igt;Valeurslt;/agt;  lt;/ligt;  lt;ligt;  lt;a routerLink="indice-boursier"gt;  lt;i class="fa fa-credit-card"gt;lt;/igt;Indices Boursierslt;/a  gt;  lt;/ligt;  lt;ligt;  lt;a routerLink="devise"gt; lt;i class="fa fa-key"gt;lt;/igt;Deviseslt;/agt;  lt;/ligt;  lt;ligt;  lt;a routerLink="valuable-table"gt;  lt;i class="fa fa-credit-card"gt;lt;/igt;Tableau de valeurslt;/a  gt;  lt;/ligt;  lt;ligt;  lt;a routerLink="form-create"gt;  lt;i class="fa fa-credit-card"gt;lt;/igt;Création formulairelt;/a  gt;  lt;/ligt;  lt;ligt;  lt;a routerLink="form-delete"gt;  lt;i class="fa fa-credit-card"gt;lt;/igt;Suppresion formulairelt;/a  gt;  lt;/ligt;  lt;ligt;  lt;a routerLink="form-follow-up"gt;  lt;i class="fa fa-credit-card"gt;lt;/igt;Suivi formulairelt;/a  gt;  lt;/ligt;  lt;/ulgt;  lt;/divgt;  lt;/bodygt; lt;/htmlgt;

Ответ №2:

Сначала запустите этот фрагмент и посмотрите, хотите ли вы чего-то подобного, если да, то вам просто нужно добавить overflow-y: scroll в свой #sidebarMenu 

 /* Add application styles amp; imports to this file! */  @import '~bootstrap/dist/css/bootstrap.css'; @import url('https://fonts.googleapis.com/css?family=Varela Round'); @import '~font-awesome/css/font-awesome.css';  html, body {  overflow-x: hidden;  height: 100%; } body {  background: #fff;  padding: 0;  margin: 0;  font-family: 'Varela Round', sans-serif; } .header {  display: block;  margin: 0 auto;  width: 100%;  max-width: 100%;  box-shadow: none;  background-color: cornflowerblue;  position: fixed;  height: 60px !important;  overflow: hidden;  z-index: 10; } .main {  margin: 0 auto;  display: block;  height: 100%;  margin-top: 60px; } .mainInner {  display: table;  height: 100%;  width: 100%;  text-align: center; } .mainInner div {  display: table-cell;  vertical-align: middle;  font-size: 3em;  font-weight: bold;  letter-spacing: 1.25px; } #sidebarMenu {  height: 100%;  overflow-y: scroll; /*Added only this */  position: fixed;  left: 0;  width: 250px;  margin-top: 60px;  transform: translateX(-250px);  transition: transform 250ms ease-in-out;  /* background: linear-gradient(180deg, #FC466B 0%, #3F5EFB 100%); */  background-color: cornflowerblue; } .sidebarMenuInner {  margin: 0;  padding: 0;  border-top: 1px solid rgba(255, 255, 255, 0.1); } .sidebarMenuInner li {  list-style: none;  color: #fff;  text-transform: uppercase;  font-weight: bold;  padding: 20px;  cursor: pointer;  border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .sidebarMenuInner li span {  display: block;  font-size: 14px;  color: rgba(255, 255, 255, 0.5); } .sidebarMenuInner li a {  color: #fff;  text-transform: uppercase;  font-weight: bold;  cursor: pointer;  text-decoration: none; } input[type='checkbox']:checked ~ #sidebarMenu {  transform: translateX(0); }  input[type='checkbox'] {  transition: all 0.3s;  box-sizing: border-box;  display: none; } .sidebarIconToggle {  transition: all 0.3s;  box-sizing: border-box;  cursor: pointer;  position: absolute;  z-index: 99;  height: 100%;  width: 100%;  top: 22px;  left: 15px;  height: 22px;  width: 22px; } .spinner {  transition: all 0.3s;  box-sizing: border-box;  position: absolute;  height: 3px;  width: 100%;  background-color: #fff; } .horizontal {  transition: all 0.3s;  box-sizing: border-box;  position: relative;  float: left;  margin-top: 3px; } .diagonal.part-1 {  position: relative;  transition: all 0.3s;  box-sizing: border-box;  float: left; } .diagonal.part-2 {  transition: all 0.3s;  box-sizing: border-box;  position: relative;  float: left;  margin-top: 3px; } input[type='checkbox']:checked ~ .sidebarIconToggle gt; .horizontal {  transition: all 0.3s;  box-sizing: border-box;  opacity: 0; } input[type='checkbox']:checked ~ .sidebarIconToggle gt; .diagonal.part-1 {  transition: all 0.3s;  box-sizing: border-box;  transform: rotate(135deg);  margin-top: 8px; } input[type='checkbox']:checked ~ .sidebarIconToggle gt; .diagonal.part-2 {  transition: all 0.3s;  box-sizing: border-box;  transform: rotate(-135deg);  margin-top: -9px; } 
 lt;!DOCTYPE htmlgt; lt;htmlgt;  lt;headgt;  lt;titlegt;HTML CSS JSlt;/titlegt;  lt;/headgt;  lt;bodygt;  lt;div class="header"gt;lt;/divgt;  lt;input type="checkbox" class="openSidebarMenu" id="openSidebarMenu" /gt;  lt;label for="openSidebarMenu" class="sidebarIconToggle"gt;  lt;div class="spinner diagonal part-1"gt;lt;/divgt;  lt;div class="spinner horizontal"gt;lt;/divgt;  lt;div class="spinner diagonal part-2"gt;lt;/divgt;  lt;/labelgt;  lt;div id="sidebarMenu"gt;  lt;ul class="sidebarMenuInner"gt;  lt;ligt;  lt;a routerLink="account-opening"gt;  lt;i class="fa fa-key"gt;lt;/igt;Ouverture d'un comptelt;/a  gt;  lt;/ligt;  lt;ligt;  lt;a routerLink="portfolio"gt;  lt;i class="fa fa-credit-card"gt;lt;/igt;Selection d'un portefeuillelt;/a  gt;  lt;/ligt;  lt;ligt;  lt;a routerLink="corporate-action"gt;  lt;i class="fa fa-key"gt;lt;/igt;Corporate actionslt;/a  gt;  lt;/ligt;  lt;ligt;  lt;a routerLink="visualization-deposit"gt;  lt;i class="fa fa-credit-card"gt;lt;/igt;Visualisation des dépôtslt;/a  gt;  lt;/ligt;  lt;ligt;  lt;a routerLink="value"gt; lt;i class="fa fa-key"gt;lt;/igt;Valeurslt;/agt;  lt;/ligt;  lt;ligt;  lt;a routerLink="indice-boursier"gt;  lt;i class="fa fa-credit-card"gt;lt;/igt;Indices Boursierslt;/a  gt;  lt;/ligt;  lt;ligt;  lt;a routerLink="devise"gt; lt;i class="fa fa-key"gt;lt;/igt;Deviseslt;/agt;  lt;/ligt;  lt;ligt;  lt;a routerLink="valuable-table"gt;  lt;i class="fa fa-credit-card"gt;lt;/igt;Tableau de valeurslt;/a  gt;  lt;/ligt;  lt;ligt;  lt;a routerLink="form-create"gt;  lt;i class="fa fa-credit-card"gt;lt;/igt;Création formulairelt;/a  gt;  lt;/ligt;  lt;ligt;  lt;a routerLink="form-delete"gt;  lt;i class="fa fa-credit-card"gt;lt;/igt;Suppresion formulairelt;/a  gt;  lt;/ligt;  lt;ligt;  lt;a routerLink="form-follow-up"gt;  lt;i class="fa fa-credit-card"gt;lt;/igt;Suivi formulairelt;/a  gt;  lt;/ligt;  lt;/ulgt;  lt;/divgt;  lt;/bodygt; lt;/htmlgt;
Метки: