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

小组聊天灌水 小组聊天灌水 主题:993 回复:2175

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

浮生未歇 发布于 2016-11-01 字数 1287 浏览 1030 回复 1

按钮的文字位置偏下啊

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>

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(1

偏爱自由 2017-09-17 1 楼

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

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