鍍金池/ 問答/HTML5  網(wǎng)絡(luò)安全  HTML/ flex布局的第一行的li標簽如何居中顯示？

flex布局的第一行的li標簽如何居中顯示？

如何在不改變dom結(jié)構(gòu)的情況下讓第一行的li居中顯示?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul{
            display: flex;
            flex-wrap: wrap-reverse;
            list-style: none;
            width: 1000px;
        }
        ul li{
            width: 80px;
            height: 60px;
            background: #ccc;
            margin-right: 80px;
            margin-bottom: 10px;
        }
        ul li:nth-of-type(6n){
            margin-right: 0;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</body>
</html>

圖片描述

回答
編輯回答
夢若殤

試試下面這樣可以不

 ul{
        display: flex;
        flex-wrap: wrap-reverse;
        justify-content: center;
        list-style: none;
        width: 100%;
    }
2017年9月15日 05:00