以图形方式将列表项排列为一些顺序

Question

我正在处理来自表的简单数据透视图，并尝试在水平列表中显示数据。我想让设计也能在移动设备中显示。下面是我简单的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>

我想显示如下图所示的数据：

Answer 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>

Answer 2

您可以通过CSS媒体查询来实现。您需要定义更改堆叠顺序时所需的宽度。我将其设置为480px。请参阅下面的小提琴示例。

.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>

documentation

Answer 3

您可以使用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;      
}

Answer 4

替换此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>