知优码

您现在的位置是:首页 > WEB相关 > Css样式

Css样式

semantic-ui中list和items列表的区别

2020-04-19Css样式
semantic-ui中list和items都是用来显示列表的,内部元素都是item类型,他们的区别是布局方式不同。都可以用来显示列表数据。
semantic-ui中list和items都是用来显示列表的,内部元素都是item类型,他们的区别是布局方式不同。
一、list类型的列表
<div class="ui list">
  <div class="item">Apples</div>
  <div class="item">Pears</div>
  <div class="item">Oranges</div>
</div>


list中item类型的元素display="list-item" ,元素会作为列表显示。图片的宽度会随着文字内容的增多而变小。即图片占用的空间是动态变化的。

二、items类型的列表

<div class="ui items">

  <div class="item">
    <div class="image">
      <img src="/images/wireframe/image.png">
    </div>
    <div class="content">
      <a class="header">12 Years a Slave</a>
    </div>
  </div>

  <div class="item">
    <div class="image">
      <img src="/images/wireframe/image.png">
    </div>
    <div class="content">
      <a class="header">My Neighbor Totoro</a>
    </div>
  </div>

</div>

list中item类型的元素display="flex" ,元素内部是按flex布局的。图片的大小占用指定的空间。图片占用的空间不会随着文字内容的多少变化。
semantic中list列表