diff --git a/components/list/Item.tsx b/components/list/Item.tsx index 5762d61a15..d4bb35e967 100644 --- a/components/list/Item.tsx +++ b/components/list/Item.tsx @@ -112,9 +112,10 @@ export default class Item extends React.Component { ))} ); + const Tag = grid ? 'div' : 'li'; const itemChildren = ( -
{ actionsContent, extra ? React.cloneElement(extra as React.ReactElement, { key: 'extra' }) : null, ]} -
+ ); return grid ? ( diff --git a/components/list/index.tsx b/components/list/index.tsx index c9213ad00f..500afd00d0 100644 --- a/components/list/index.tsx +++ b/components/list/index.tsx @@ -233,7 +233,11 @@ export default class List extends React.Component> { ); }); - childrenContent = grid ? {childrenList} : childrenList; + childrenContent = grid ? ( + {childrenList} + ) : ( +
    {childrenList}
+ ); } else if (!children && !isLoading) { childrenContent = this.renderEmpty(prefixCls, renderEmpty); } diff --git a/components/list/style/index.less b/components/list/style/index.less index e48eac4f64..2aada04ab6 100644 --- a/components/list/style/index.less +++ b/components/list/style/index.less @@ -37,76 +37,82 @@ text-align: center; } - &-item { - display: flex; - align-items: center; - padding: @list-item-padding; + &-items { + margin: 0; + padding: 0; + list-style: none; - &-no-flex { - display: block; - } - - &-content { - color: @text-color; - } - - &-meta { + .@{list-prefix-cls}-item { display: flex; - flex: 1; - align-items: flex-start; - font-size: 0; - &-avatar { - margin-right: @list-item-meta-avatar-margin-right; + align-items: center; + padding: @list-item-padding; + + &-no-flex { + display: block; } + &-content { - flex: 1 0; - } - &-title { - margin-bottom: 4px; color: @text-color; - font-size: @font-size-base; - line-height: 22px; - > a { + } + + &-meta { + display: flex; + flex: 1; + align-items: flex-start; + font-size: 0; + &-avatar { + margin-right: @list-item-meta-avatar-margin-right; + } + &-content { + flex: 1 0; + } + &-title { + margin-bottom: 4px; color: @text-color; - transition: all 0.3s; - &:hover { - color: @primary-color; + font-size: @font-size-base; + line-height: 22px; + > a { + color: @text-color; + transition: all 0.3s; + &:hover { + color: @primary-color; + } } } + &-description { + color: @text-color-secondary; + font-size: @font-size-base; + line-height: 22px; + } } - &-description { - color: @text-color-secondary; - font-size: @font-size-base; - line-height: 22px; - } - } - &-action { - flex: 0 0 auto; - margin-left: 48px; - padding: 0; - font-size: 0; - list-style: none; - & > li { - position: relative; - display: inline-block; - padding: 0 8px; - color: @text-color-secondary; - font-size: @font-size-base; - line-height: 22px; - text-align: center; - cursor: pointer; - } - & > li:first-child { - padding-left: 0; - } - &-split { - position: absolute; - top: 50%; - right: 0; - width: 1px; - height: 14px; - margin-top: -7px; - background-color: @border-color-split; + &-action { + flex: 0 0 auto; + margin-left: 48px; + padding: 0; + font-size: 0; + list-style: none; + & > li { + position: relative; + display: inline-block; + padding: 0 8px; + color: @text-color-secondary; + font-size: @font-size-base; + line-height: 22px; + text-align: center; + cursor: pointer; + } + & > li:first-child { + padding-left: 0; + } + &-split { + position: absolute; + top: 50%; + right: 0; + width: 1px; + height: 14px; + margin-top: -7px; + background-color: @border-color-split; + } } } } @@ -147,7 +153,7 @@ min-height: 32px; } - &-something-after-last-item .@{ant-prefix}-spin-container > &-item:last-child { + &-something-after-last-item .@{ant-prefix}-spin-container > &-items > &-item:last-child { border-bottom: 1px solid @border-color-split; }