如何在MVC中的li元素之间插入间隔图像？

Question

我在MVC3母版页(_Layout.cshtml)中有以下内容.

<ul id="someMenu">
    <li><a href="http://someURL"> someText </a></li>
    <li><a href="http://someURL"> someText </a></li>
    <li><a href="http://someURL"> someText </a></li>
</ul>

我尝试通过这样做在链接之间添加间隔图像:

<ul id="someMenu">
    <li><a href="http://someURL"> someText </a>
        <img src="http://someSpacer.gif" />
    </li>
    <li><a href="http://someURL"> someText </a>
        <img src="http://someSpacer.gif" />
    </li>
    <li><a href="http://someURL"> someText </a>
    </li>
</ul>

但是这没有正确显示,而且我觉得我违反DRY一遍又一遍地输入该图像URL(我的实际网页有几个这些li元素,而不仅仅是3个).它在li的一部分上显示了间隔图像,但我希望它出现在 li元素之间.不,我无法在li控件之间放置img控件; 这不被允许.

回到web-forms和asp:Menu的时代,你可以指定一次"StaticBottomSeparatorImageUrl",一切都运行得很好.有谁知道如何在MVC3中实现这一目标？

Answer 1

这不是一个MVC问题,更像是一个HTML和CSS问题.我会添加背景图像和一些填充,而不是放置一些间隔li.

li
{
    padding-right: 10px;
    background-image: url('someurl');
    background-position: center right;
    background-repeat: no-repeat;
}