使用CSS3列出数字对齐

Question

我正在尝试使用CSS3创建以下效果(仅限Chrome).基本上我想要一个<ol>包含一个单选按钮和一个标签的编号元素.目的是让列表编号,收音机和标签全部在中心对齐:

这是我的标记:

<ol>
    <li>
        <div class="wrapper">
            <div class="left">
                <input type="radio" />
            </div>
            <div class="right">
                <label>Some really long text here that overlaps a few lines. Some really long text here that overlaps a few lines. Some really long text here that overlaps a few lines. Some really long text here that overlaps a few lines</label>
            </div>
        </div>
    </li>
</ol>

到目前为止我的CSS:

.wrapper {
    display: flex
}
.left {
    width: 50px;
    position: relative;
}
.right {
    flex: 1;
}
input {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    margin-top: -8px;
}

并且是上面的一个jsFiddle.

我已经尝试过使用浮动(打破<ol>编号),我尝试使用包装div和不同的显示类型(table/ table-cell),并且我已经通过使用我的最接近的努力着陆了flex.

问题是我仍然无法获得列表编号与单选按钮对齐.它始终与顶部对齐<li>(以及一些我无法弄清楚的随机空白).

我愿意使用任何东西来创建图像中显示的所需效果.甚至是Javascript/jQuery.但只有在无法使用纯CSS选项的情况下.

Answer 1

你真的需要所有这些div's里面你li？如果不是,那就是内部元素的vertical-align设置和设置width.

你可以将你的html重写为:

<ol>
    <li>
        <input type="radio" />
        <label>Some really long text here that overlaps a few lines. Some really long text here that overlaps a few lines. Some really long text here that overlaps a few lines. Some really long text here that overlaps a few lines</label>
    </li>
</ol> 

和css:

li input {
    vertical-align: text-bottom;
    display:inline-block;
    width:5%;
}
li label {
    vertical-align: middle;
    display:inline-block;
    width:90%;
}

这是一个演示小提琴