将字母与网格对齐

-1

我想将我的字母与网格对齐，以便它们均匀分布，如果有办法，我该如何做。将字母与网格对齐

2016-11-14 Anders Berg Halvorsen

有很多方法....不过我们这里不写了代码，所以发布你的，我们会尽量使工作 – LGSon

直视flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/我最近使用了类似的东西：http://codepen.io/JKirchartz/pen/YpPmRV – JKirchartz

请包括您的HTML代码和你用来设计它的CSS。 – 2016-11-14 19:07:37

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>

来源

2016-11-14 19:25:23

将字母与网格对齐

回答

相关问题