CSS-使用li标签制作导航按钮

Question

html的代码

<div class="operation">
    <div  id="navcontainer">
        <ul>
            <li>
                <span class="button-left"></span>
                <span class="button">
                    <a href="#">取消</a>
                </span>
                <span class="button-right"></span>
            </li>
            <li>
                <span class="button-left"></span>
                <span class="button">
                    <a href="#">下一页</a>
                </span>
                <span class="button-right"></span>
            </li>
            <li>
                <span class="button-left"></span>
                <span class="button">
                    <a href="#">上一页</a>
                </span>
                <span class="button-right"></span>
            </li>
        </ul>
    </div>
</div>

Answer 1

将按钮部分<span>, <a>标签的类型定成inline-block，然后再定义line-height，将节点高度统一就可以了
建议你html中button的代码不要写左中右三个兄弟节点这么写，可以用span两层嵌套关系，一张背景

  <span class="btnLeft">
<span class="btnRight">
<a>button</a>
</span>
</span>