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

【问题标题】：How do I insert spacer images between li elements in MVC?如何在 MVC 中的 li 元素之间插入间隔图像？
【发布时间】：2011-05-12 16:44:19
【问题描述】：

我的 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 控件放在 li 控件之间；这是不允许的。

在网络表单和 asp:Menu 的时代，您可以指定一次“StaticBottomSeparatorImageUrl”，一切都运行良好。有谁知道如何在 MVC3 中实现这一点？

【问题讨论】：

使用CSS添加空格
真的吗？间隔图像？是否存在任何间隔 gif 比 CSS 更好的选择？
对该问题投反对票的原因是什么？诚然，我将图像编码为 html 是错误的，但这仍然是一个合理的问题，我从发布的答案中学到了。

标签： html css asp.net-mvc razor html-lists

【解决方案1】：

这不是真正的 MVC 问题，更多的是 HTML 和 CSS 问题。而不是放置一些间隔，我会添加一个背景图像和一些填充到li？

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

【讨论】：

【解决方案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>

我认为这是简单而动态的。在一个地方进行一次更改，为该关联类更改所有内容。祝你好运！

【讨论】：