Question

我已将此code from jsfiddle借用并修改为下面的代码段。我希望能够将文本包装在某些箭头而不是其他箭头中。如您所见，单行文本不会在同一位置和两行中呈现。我希望文本集中在<li>，我该如何解决？

＆＃13;

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;}

＆＃13;

<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>

＆＃13;

Answer 1

您可以在我的评论

中为该行添加一些内联样式

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

或它可以通过向最后一个li及其后代添加一些css异常来工作，但如果单行在列表中的随机位置就不会起作用...

＆＃13;

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;}

＆＃13;

<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>

＆＃13;

Answer 2

@UncaughtTypeError提供了正确的解决方案

声明vertical-align: top on ul.money-class li

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

2 个答案: