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>

但是这没有正确显示，而且我觉得我违反了D-R-Y一遍又一遍地输入该图像URL（我的实际网页有几个这些li元素，而不仅仅是3个）。它在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;
}

Answer 2

我在我的css表中创建了一个单独的类，例如：

   .spacing{
    height: (whatever you want);
    }

然后像这样做你的代码：

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

我认为这很容易和动态。在一个地方进行一次更改，为相关课程更改所有内容。祝你好运！

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

2 个答案: