- <ul class="hui-list hui-list-disc">
- <li class="hui-list-item">无序列表</li>
- <li class="hui-list-item">无序列表</li>
- <li class="hui-list-item">无序列表</li>
- </ul>
- <ol class="hui-list hui-list-decimal">
- <li class="hui-list-item">有序列表</li>
- <li class="hui-list-item">有序列表</li>
- <li class="hui-list-item">有序列表</li>
- </ol>
- <ol class="hui-list hui-list-top">
- <li class="hui-list-item"><span class="num">1</span>有序列表</li>
- <li class="hui-list-item"><span class="num">2</span>有序列表</li>
- <li class="hui-list-item"><span class="num">3</span>有序列表</li>
- </ol>
- .hui-list {
- .hui-list-item {
- position: relative;
- overflow: hidden;
- margin-bottom: 5px;
- font-size: 14px;
- /*禁止换行*/
- .date {
- font-size: 12px;
- font-family: Arial;
- color: #999;
- }
- }
- &.hui-list-disc {
- list-style: inside;
- list-style-type: disc;
- }
- &.hui-list-decimal {
- list-style: inside;
- list-style-type: decimal;
- }
-
- /*排行榜*/
- &.hui-list-top {
- .hui-list-item {
- padding-left: 30px;
- text-overflow: ellipsis;
- vertical-align: bottom;
- white-space: nowrap;
- height: 20px;
- list-style: 20px;
- .num {
- position: absolute;
- top: 0;
- left: 0;
- width: 20px;
- height: 20px;
- line-height: 20px;
- color: #fff;
- background-color: #5a98de;
- text-align: center;
- }
- }
- }
- }
-
- /*横向手机 竖向平板*/
- @media (max-width: 767px) {
- .hui-list {
- .hui-list-item {
- font-size: 18px;
- padding: 11px 15px;
- border-bottom: 1px solid #eee;
- > a {
- display: block;
- margin: -11px -15px
- }
- .date {
- display: none
- }
- .hui-iconfont {
- background-size: 9px auto;
- margin-top: -7px;
- position: absolute;
- right: 15px;
- top: 50%;
- }
- }
- }
- .night .hui-list {
- >.hui-list-item {
- border-bottom: 1px solid #1F1F1F;
- }
- }
- }
- .hui-list .hui-list-item {
- position: relative;
- overflow: hidden;
- margin-bottom: 5px;
- font-size: 14px;
- /*禁止换行*/
- }
- .hui-list .hui-list-item .date {
- font-size: 12px;
- font-family: Arial;
- color: #999;
- }
- .hui-list.hui-list-disc {
- list-style: inside;
- list-style-type: disc;
- }
- .hui-list.hui-list-decimal {
- list-style: inside;
- list-style-type: decimal;
- }
- .hui-list.hui-list-top .hui-list-item {
- padding-left: 30px;
- text-overflow: ellipsis;
- vertical-align: bottom;
- white-space: nowrap;
- height: 20px;
- list-style: 20px;
- }
- .hui-list.hui-list-top .hui-list-item .num {
- position: absolute;
- top: 0;
- left: 0;
- width: 20px;
- height: 20px;
- line-height: 20px;
- color: #fff;
- background-color: #5a98de;
- text-align: center;
- }
-
- /*横向手机 竖向平板*/
- @media (max-width: 767px) {
- .hui-list .hui-list-item {
- font-size: 18px;
- padding: 11px 15px;
- border-bottom: 1px solid #eee;
- }
- .hui-list .hui-list-item > a {
- display: block;
- margin: -11px -15px;
- }
- .hui-list .hui-list-item .date {
- display: none;
- }
- .hui-list .hui-list-item .hui-iconfont {
- background-size: 9px auto;
- margin-top: -7px;
- position: absolute;
- right: 15px;
- top: 50%;
- }
-
- .night .hui-list > .hui-list-item {
- border-bottom: 1px solid #1F1F1F;
- }
- }