Question

我希望将字母与网格对齐，以便它们均匀分布，如果有办法的话。

Answer 1

https://output.jsbin.com/gosolazupa：

<!doctype html>
<html>
    <head>
        <title></title>
        <style>
#reference {
    width: 300px;
    height: 314px;
    background: url(https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/e8d3c127753367.5652fa344a341.png) no-repeat;
    background-size: 100%;
    float: left;
    margin: 0 10px 0 0;
}
.box { float: left; }
/**/
.box {
    background: #fc3927;
    box-sizing: border-box;
    width: 300px;
    height: 314px;
    font: bold 26px serif;
    color: white;
}
.box ol {
    list-style: none;
    margin: 0 auto;
    width: 60%;
    padding: 1em 0;
    width: 7em;
    overflow: auto;
}
.box ol li {
    float: left;
    width: 1em;
    text-align: center;
    margin: 0 0.2em;
}
.box ol:first-child li:nth-child(9) {
    margin-right: 0;
}
.box ol:first-child li:nth-child(9), 
.box ol:first-child li:nth-child(10) {
    width: 0.5em;
    width: 0.5em;
}
.box ol:first-child li:nth-child(10) {
    margin-left: 0;
}
        </style>
    </head>
    <body>
        <div id="reference"></div>
        <div class="box">
            <ol>
                <li>A</li>
                <li>B</li>
                <li>C</li>
                <li>D</li>
                <li>E</li>
                <li>F</li>
                <li>G</li>
                <li>H</li>
                <li>I</li>
                <li>J</li>
                <li>K</li>
                <li>L</li>
                <li>M</li>
                <li>N</li>
                <li>O</li>
                <li>P</li>
                <li>Q</li>
                <li>R</li>
                <li>S</li>
                <li>T</li>
                <li>U</li>
                <li>V</li>
                <li>W</li>
                <li>X</li>
                <li>Y</li>
                <li>Z</li>
            </ol>
            <ol>
                <li>0</li>
                <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>
            </ol>
        </div>
    </body>
</html>

将字母对齐到网格

1 个答案: