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

原文 标签 html css asp.net-mvc razor html-lists

How do I insert spacer images between li elements in MVC?

I have the following in my MVC3 master page (_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>

I tried to add spacer images between the links by doing this:

<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>

But that's not displaying properly, plus I feel like I'm violating D-R-Y typing that image URL over and over again (my actual web page has several of these li elements, not just 3). It's displaying the spacer image over part of the li, but I want it to appear between the li elements. And no, I'm not able to place the img controls between the li controls; it's not allowed.

Back in the days of web-forms and asp:Menu, you could specify the "StaticBottomSeparatorImageUrl" once and everything worked nicely. Does anyone know how to accomplish this in MVC3?

Answer

This is not really an MVC issue, more an HTML and CSS issue. Rather than place some spacer I would add a background image and some padding to the li?

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

翻译

我的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控件之间;这不被允许。

回顾Web表单和asp:Menu的时代,您可以一次指定“ StaticBottomSeparatorImageUrl”,然后一切正常。有谁知道如何在MVC3中完成此任务?
最佳答案
这实际上不是MVC问题,而是HTML和CSS问题。而不是放置一些垫片,我会在li上添加背景图像和一些填充?

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

html - 样式设置后,颜色不会更改为特定的班级项目

php - 使用AJAX发送阵列的最佳策略

javascript - Chrome中的jQuery返回“阻止”而不是“内联”

javascript - 如何计算距左上角(0,0)的距离?

.net - CSS和母版页asp.net问题

visual-studio-2010 - VS 2010中的MVC3剃刀和淘汰赛? [关闭]

html - 带滚动条的页面上的CSS覆盖

css - 长字符串溢出div容器

html - HTML <label>歧义性(主要在我自己的大脑中)…?有人可以澄清吗?

html - IE6下没有php的一个文件中的图像