css - 怎么放中间的内容与之前：和之后：图像？

Question

我正在尝试使用 进行导航<ul>，我有两个图像（36px 高度）是按钮（列表项）的左右边框。

before:我在我的css中添加和添加它们after:，但是在我这样做之后，<li>由于我添加了两个图像（之前：和之后:），（例如：“Main”）内部的链接出现在底部。

我希望文本像普通按钮一样位于两个图像的中间。

绿色是我想要的，红色是我得到的。

Answer 1

感谢您尝试提供帮助，但不知何故我设法做到了。这是CSS：

#topmenu ul{
list-style: none;
padding: 0;
}

#topmenu ul li{
float: left;
margin-right: 5px;
background-image: url('images/btnback.png');
background-repeat: repeat-x;
height: 36px;
border-radius: 8px;
}

#topmenu ul li:before{
content: url('images/btnLeft.png');
float: left;
}

#topmenu ul li:after{
content: url('images/btnRight.png');
}

这是HTML：

<div id="topmenu">
<ul>
<li>
<a href="#">Main</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>