关于ul右浮动排列内容倒序的问题

 当我们要实现ul标签在右上角横向排列时，往往会采取给

、
• 添加有浮动的方法，这样会出现
• 内容出现的顺序跟我们写的不一样的情况，例如：
  我们写的是这样的：

  "headerTop">
  "main">"logo l">
  Classic
  "ulList">
  "r">
  "#">Home
  "#">Aboout
  "#">Services
  "#">Portfolio
  "#">Team
  "#">Contact
  
  

  得到的结果是这样的：
  

  此时我们可以使用flex布局

  • css

  .main{ width: 1340px;  margin:0 auto;}  /*margin: auto; -> 使该区域在浏览器中央*/* {margin: 0; /* 外边距 */padding: 0; /* 内边距 */font-family: sans-serif; /* 字体样式 */}li{list-style: none;}   /*list-style: none -> 去掉ul标签前的小圆点*/a{text-decoration: none; color: #000;}      /*text-decoration: none -> 去掉a标签的下划线*/#headerTop{height: 78px;width: 100%;line-height: 78px;background: pink;}#headerTop header .logo p{font-size: 32px;font-weight: 700;color: #65666c;}/*---------------------------主要部分--------------------------------------------*//*#headerTop header{display: flex;justify-content: space-between;	/*或者不给ul添加justify-content: flex-end; 用justify-content: space-between;实现ul和logo两端对齐*/ }*/#headerTop header .ulList ul{display: flex;flex-direction: row;	/*使子项显示为行，从左到右显示*/justify-content: flex-end;	/*让子项li靠区域结束位置对齐*/}#headerTop header .ulList ul li a{font-size: 16px;margin: 0 12px;	/*使内容分开*/}
  

  • html

  "headerTop">
  "main">"logo l">
  Classic
  "ulList">
  "#">Home
  "#">Aboout
  "#">Services
  "#">Portfolio
  "#">Team
  "#">Contact
  

  

  
  

  本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！