css - 如何将 <li> 内容放在 : and after: images? 之前的中间

Question

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

我用 before: 添加它们和 after:在我的 css 中，但在我这样做之后，<li> 中的链接(例如:“主要”)出现在底部，因为我添加了两个图像(之前:和之后:)。

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

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

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>