html - 水平对齐不同行号的 <li>

Question

我借用并修改了这个code from jsfiddle到下面的代码片段。我希望能够将文本包装在某些箭头中而不是其他箭头中。如您所见，单行文本不会呈现在同一个地方和两行。我希望文本以 <li> 为中心, 我该如何解决？

ul.money-class {
    /*margin: 20px 60px;*/
    margin-bottom: 0px
}

ul.money-class li {
    display: inline-block;
    height: 60px;
    line-height: 60px;
    width: 150px;
    margin: 5px 1px 0 0;
    text-indent: 35px;
    position: relative;
    
}

ul.money-class li:before {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    left: 0px;
    border-style: solid;
    border-width: 30px 0 30px 30px;
    border-color: transparent transparent transparent #fff;
    z-index: 0;
}

ul.money-class li:first-child:before {
    /*border-color: transparent;*/
}

ul.money-class li a:after {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    right: -30px;
    top: 0px;
    border-style: solid;
    border-width: 30px 0 30px 30px;
    border-color: transparent transparent transparent #ccc;
    z-index: 10;
    text-decoration: none;
}

ul.money-class li.active a {
    background: orange;
    z-index: 100;
}

ul.money-class li.active a:after {
    border-left-color: orange;
}

ul.money-class li a {
    display: block;
    background: #ccc;
}

ul.money-class li a:hover {
    background: pink;
}

ul.money-class li a:hover:after {
    border-color: transparent transparent transparent pink; 
}

span {display: block; line-height: 30px;}

<table class="table">
    <tr>
        <td>
            <ul class="money-class">
                <li class="active"><a href=""><span>Round 1</span><span>£100</span></a></li>
                <li><a href="#"><span>Round 2</span><span>£200</span></a></li>
                <li><a href="#"><span>Round 3</span><span>£300</span></a></li>
                <li><a href="#"><span>Round 4</span><span>£400</span></a></li>
                <li><a href="#"><span>Round 5</span><span>£500</span></a></li>
                <li><a href="#">Prize Pot</a></li>
            </ul>
        </td>
    </tr>
</table>

Answer 1

您可以像我的评论一样只为该行添加一些内联样式

<li style="vertical-align:top"><a href="#"><span style="line-height:60px; height:60px">Prize Pot</span></a></li>

或者 它可以通过向最后一个 li 及其后代添加一些 css 异常来工作，但如果单行位于列表中的随机位置，它将无法工作...

ul.money-class {
    /*margin: 20px 60px;*/
    margin-bottom: 0px
}

ul.money-class li {
    display: inline-block;
    height: 60px;
    line-height: 60px;
    width: 150px;
    margin: 5px 1px 0 0;
    text-indent: 35px;
    position: relative;  
}

ul.money-class li:before {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    left: 0px;
    border-style: solid;
    border-width: 30px 0 30px 30px;
    border-color: transparent transparent transparent #fff;
    z-index: 0;
}

ul.money-class li:first-child:before {
    /*border-color: transparent;*/
}

ul.money-class li a:after {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    right: -30px;
    top: 0px;
    border-style: solid;
    border-width: 30px 0 30px 30px;
    border-color: transparent transparent transparent #ccc;
    z-index: 10;
    text-decoration: none;
}

ul.money-class li.active a {
    background: orange;
    z-index: 100;
}

ul.money-class li.active a:after {
    border-left-color: orange;
}
ul.money-class li:last-child {vertical-align:top}
ul.money-class li:last-child a span {line-height:60px}
ul.money-class li a {
    display: block;
    background: #ccc;
}

ul.money-class li a:hover {
    background: pink;
}

ul.money-class li a:hover:after {
    border-color: transparent transparent transparent pink; 
}

span {display: block; line-height: 30px;}

<table class="table">
    <tr>
        <td>
            <ul class="money-class">
                <li class="active"><a href=""><span>Round 1</span><span>£100</span></a></li>
                <li><a href="#"><span>Round 2</span><span>£200</span></a></li>
                <li><a href="#"><span>Round 3</span><span>£300</span></a></li>
                <li><a href="#"><span>Round 4</span><span>£400</span></a></li>
                <li><a href="#"><span>Round 5</span><span>£500</span></a></li>
                <li><a href="#">Prize Pot</a></li>
            </ul>
        </td>
    </tr>
</table>