CSS如何实现一个既简单又漂亮的列表

import React, {Component} from ‘react’
import ‘./App.css’
class App extends Component{
render() {
return (

• 
  
  
  
  我是列表项
  
  
  


• 
  
  
  
  
  
  我是列表项
  
  
  

);
}
}
export default App
复制代码

APP.css

复制代码 .mylist{ padding-top: 200px; padding-left: 300px; background-color: #EEE; height: 500px; } .mylist>li{ position: relative; margin-top: 20px; width: 600px; height: 80px; background-color: #fff; display: flex; } .mylist>li>img{ width: 200px; height: 80px; } .mylist>li>.li-content{ flex: 1; display: flex; justify-content: center; align-items: center; } .mylist>li>.mongolia{ position: absolute; width: 200px; height: 80px; background-image: linear-gradient(to right, rgb(255,255,255,0), #ffffff); } 深圳网站优化www.zg886.cn