<div> <ul> <li><span>1</span></li> <li><span>2</span></li> <li><span>3</span></li> <li><span>4</span></li></ul><ul> <li><span>5</span></li> <li>6</li> <li>7</li> <li>8</li></ul><ul> <li>9</li> <li>10</li> <li>11</li> <li>12</li></ul> <ul> <li>13</li> <li>14</li> <li>15</li> <li>16</li></ul> <ul> <li>17</li> <li>18</li> <li>19</li> <li>20</li></ul></div>*{margin:0;padding:0; box-sizing: border-box;}div{padding:50px;}ul{ height:40px; width:400px;}ul li{ float:left; width:100px; height:20px; line-height:60px; border-bottom:1px solid #ccc; text-align: center; list-style:none; }ul li:first-child{ border-left:1px solid #ccc;}ul li span{display:block;width:50px;height:60px;border-radius：50%;background:red;line-height:80px;}ul:nth-child(2n) li{ float:right}ul:nth-child(2n) li:first-child{ border-right:1px solid #ccc; border-left:none;}ul:first-child li{ border-left:none;}xxxxxxxxxx