如何垂直对齐ol的数量? [英] How to vertically align numbers of ol?

问题描述

列表的数字根据li的文本长度移动，从而导致垂直对齐方式下降.请注意，我在数字上设置了样式，如您在 fiddle 中看到的.

The numbers of the list are moving according to the text length of the li, causing the vertical align to drop. Notice that I have styles the numbers, as you can see in the fiddle.

我尝试使用跨度，但无法使其正常工作.

I tried to use a span, but I couldn't get it working.

CSS

li span { 
    vertical-align: middle;
    display: inline-block;
}

HTML

<ol class="rounded-list center_ol">
    <li class="cool_white"><a href=""><span>Yannis Drogitis</span></a>
    </li>
    <li class="cool_white"><a href=""><span>Dimitris Mariglis</span></a>
    </li>
    <li class="cool_white"><a href=""><span>Kots Mariglis</span></a>
    </li>
</ol>

如何使数字相对于列表中的其他数字垂直对齐?

How to make the numbers align vertically, in respect to every other number in the list?

不要与以下问题混淆:在同一列"中的标题左对齐ol数字

Not to be confused with this question: Left align ol numbers with the heading in the same "column"

推荐答案

在查看您的评论时，我认为这可能会对您有所帮助，但是这里有些草率，这是您需要提及<a>元素的特定宽度，如果您尝试我的解决方案.

As looking to your comments, i think this might help you, but one thing is bit sloppy here that is you need to mention specific width for <a> elements, if you try my solution.

工作:小提琴

Working : Fiddle

以下代码段:

ol.rounded-list {
    counter-reset: li;
    /* Initiate a counter */
    list-style: none;
    /* Remove default numbering */
    *list-style: decimal;
    /* Keep using default numbering for IE6/7 */
    font: 15px'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.rounded-list a {
    color: #444;
    text-decoration: none;
    display:block;
    width:125px;
    text-align:left;
    background:;
    margin:0px auto;
}
.rounded-list a:before {
    content: counter(li);
    counter-increment: li;
    position: relative;
    left: -1em;
    top: 64%;
    margin-top: -1.3em;
    background: rgba(255, 168, 76, 0.5);
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
}
.center_ol {
    text-align: center;
    list-style-position:inside;
    width:60%;
    margin:0px auto;
    border:1px solid red;
    
}

.cool_white
{
    position: relative;
    display: block;
    padding: .4em;
    border-radius: .3em;
    transition: all .3s ease-out;
    border:1px solid green;       
}

<h3 class="center_ol">Man-to-man suggestions</h3>

<ol class="rounded-list center_ol">
    <li class="cool_white"><a>Yannis Drogitis</a>

    </li>
    <li class="cool_white"><a>Dimitris Mariglis</a>

    </li>
    <li class="cool_white"><a>Kots Mariglis</a>

    </li>
</ol>

这篇关于如何垂直对齐ol的数量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！