Блог

Главная - Вопросы по программированию - упорядочивание элементов списка в некотором графическом порядке

упорядочивание элементов списка в некотором графическом порядке

#css

#css

Вопрос:

Я работаю над простыми сводными данными из таблицы и пытаюсь отобразить данные в горизонтальном списке. Я хочу сделать дизайн максимально адаптивным для отображения и на мобильных устройствах. Ниже приведен мой простой css-код

 .menu{
  width:700px; margin:0 auto;            
}
.menu li{
  display: inline;
  list-style: none;
  float: left;
  margin-right: 2em;
  padding: 0;
  text-align:center;
}
.menu .fa {
  display: block;

}
.selected {
  color: green;
}
.menu li:hover{
  color: green;
}
  .list-heading {
  font-weight: normal;      
} 
 <h3 class="list-heading">WeekName</h3>
<h3 class="list-heading">DayName</h3>
<ul class="menu">
    <li><i class="fa fa-cutlery fa-1x" aria-hidden="false"></i><span>Meal 6</span></li>
    <li><i class="fa fa-glass fa-1x" aria-hidden="false"></i><span>Meal 5</span></li>
    <li><i class="fa fa-cutlery fa-1x" aria-hidden="false"></i><span>Meal 4</span></li>
    <li><i class="fa fa-glass fa-1x" aria-hidden="false"></i><span>Meal 3</span></li>
    <li><i class="fa fa-cutlery fa-1x" aria-hidden="false"></i><span>Meal 2</span></li>
    <li><i class="fa fa-glass fa-1x" aria-hidden="false"></i><span>Meal 1</span></li>    
</ul>

Я хочу отобразить данные, подобные этому изображению:

Целевое отображаемое изображение

Ответ №1:

Для этого есть много способов. Лично я бы, вероятно, использовал flex, но если вы хотите придерживаться неупорядоченного элемента списка, вы можете просто установить li дочерним display: inline-block элементам значение и позволить потоку DOM делать то, что он должен делать, как показано ниже;

Примечание: <!-- --> между li элементами — это один из способов свести на нет интервал, который inline-block элемент имеет по умолчанию, Без необходимости добавлять отрицательные поля и т. Д.

Надеюсь, это поможет, приветствия.

 .menu{
  margin:0 auto;
  list-style: none;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}
.menu li{ 
  display: inline-block;
  padding: 0;
  text-align: center;
  width: 120px;
  border: gray 1px solid;
  padding: .5em;
}

.menu .fa {
  display: block;
  margin: 0 auto;
  margin: .5em 0;
}

.selected {
  color: green;
}

.menu li:hover{
  color: green;
}
.list-heading {
  font-weight: normal;      
} 
 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<h3 class="list-heading">WeekName</h3>
<h3 class="list-heading">DayName</h3>
<ul class="menu">
    <li><i class="fa fa-cutlery fa-1x"></i><span>Meal 6</span></li><!--
    --><li><i class="fa fa-glass fa-1x"></i><span>Meal 5</span></li><!--
    --><li><i class="fa fa-cutlery fa-1x"></i><span>Meal 4</span></li><!--
    --><li><i class="fa fa-glass fa-1x"></i><span>Meal 3</span></li><!--
    --><li><i class="fa fa-cutlery fa-1x"></i><span>Meal 2</span></li><!--
    --><li><i class="fa fa-glass fa-1x"></i><span>Meal 1</span></li>
</ul>

Ответ №2:

Заменить на этот css

 body{
  margin: 0px;
  padding: 0px;
  background: #ccc;
}
.menu{
  display: flex;
  flex-wrap: wrap;
  padding:0px;
}
.menu li{
  display: flex;
    flex-direction: column;
    width: 30vw;
    height: 30vh;
    justify-content: center;
    align-items: center;
    background: #fff;
    margin: 6px auto;
}
.menu li i{
  font-size:24px;
  width:60px;
  height:60px;
  line-height:60px;
  text-align:center;
  border:1px solid #ccc;
  border-radius:50%;
  margin-bottom:12px;
  cursor:pointer;
}

Html идет сюда ….

 <ul class="menu">
    <li><i class="fas fa-plus"></i><span>Meal 6</span></li>
    <li><i class="fas fa-plus"></i><span>Meal 6</span></li>
    <li><i class="fas fa-plus"></i><span>Meal 6</span></li>
    <li><i class="fas fa-plus"></i><span>Meal 6</span></li>
    <li><i class="fas fa-plus"></i><span>Meal 6</span></li>
    <li><i class="fas fa-plus"></i><span>Meal 6</span></li>
</ul>

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

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

1. Где я могу показать название недели и название дня каким-либо графическим способом для отображения более привлекательным

2. не могли бы вы поделиться полным css и html-кодом, как показано на рисунке

Ответ №3:

Вы можете добиться этого с помощью медиа-запроса CSS. Вам нужно будет определить желаемую ширину, когда они меняют порядок стека. Я установил для него значение 480 пикселей. Смотрите мой пример скрипки ниже.

 .menu{
      width:700px; margin:0 auto;            
    }
    .menu li{
      display: inline;
      list-style: none;
      float: left;
      margin-right: 2em;
      padding: 0;
      text-align:center;
    }
    .menu .fa {
      display: block;

    }
    .selected {
      color: green;
    }
    .menu li:hover{
      color: green;
    }
      .list-heading {
      font-weight: normal;      
   }
   @media screen and (max-width: 480px) {
     .menu li {
       margin: 0;
       width: 30%;
     }
   }
<h3 class="list-heading">WeekName</h3>
<h3 class="list-heading">DayName</h3>
<ul class="menu">
    <li><i class="fa fa-cutlery fa-1x" aria-hidden="false"></i><span>Meal 6</span></li>
    <li><i class="fa fa-glass fa-1x" aria-hidden="false"></i><span>Meal 5</span></li>
    <li><i class="fa fa-cutlery fa-1x" aria-hidden="false"></i><span>Meal 4</span></li>
    <li><i class="fa fa-glass fa-1x" aria-hidden="false"></i><span>Meal 3</span></li>
    <li><i class="fa fa-cutlery fa-1x" aria-hidden="false"></i><span>Meal 2</span></li>
    <li><i class="fa fa-glass fa-1x" aria-hidden="false"></i><span>Meal 1</span></li>    
</ul>

https://jsfiddle.net/mbc59e38/

Ответ №4:

вы можете использовать flex для упрощения компоновки. Все зависит от ваших потребностей и структуры html, поэтому иногда вам нужно использовать с медиа-запросами. Но сначала попробуйте использовать flex

 .menu{
  max-width:700px; margin:0 auto;            
}
.menu li{
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  margin-right: 2em;
  padding: 0;
  text-align:center;
}
.menu .fa {
  display: block;

}
.selected {
  color: green;
}
.menu li:hover{
  color: green;
}
.list-heading {
  font-weight: normal;      
}
Метки: