Question

我想要一个带有下一个按钮的图像幻灯片，该按钮构成图像的整个右边框。是否可以使用＆＃34; NEXT＆＃34;显示在红色区域的中心，而不是与图像在同一行？

<ul>
    <li></li>
    <span>NEXT</span>
</ul>

li {
    display: block;
    width:200px;
    height:100px;
    display: inline-block;
    border:1px solid;
}
span {
    background-color:red;
    padding-top:100px;
}

小提琴：

http://jsfiddle.net/PUQNg/217/

Answer 1

您的HTML和CSS有一些问题需要纠正：

span不是ul的有效孩子，请改为li
display: block;上display: inline-block;和li没有意义，只会使用最后一个display属性

要集中处理本案例中的文字，我会使用line-height设置为li的height。

li {
    border: 1px solid #000000;
    display: inline-block;
    height: 100px;
    vertical-align: middle;
    width: 200px;
}
.next {
    background-color: red;
    border: 0;
    line-height: 100px;
    width: auto;
}

<ul>
    <li></li>
    <li class="next">NEXT</li>
</ul>

将span元素放在图像旁边，但在垂直中心

1 个答案: