Как вставить разделительные изображения между элементами li в MVC? - PullRequest
Новая
       3

Как вставить разделительные изображения между элементами li в MVC?

2 голосов
/ 12 мая 2011

На главной странице 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?

Ответы [ 2 ]

7 голосов
/ 12 мая 2011

Это на самом деле не проблема MVC, а проблема HTML и CSS. Вместо того, чтобы поместить какую-нибудь прокладку, я бы добавил фоновое изображение и отступы к li? 

li
{
    padding-right: 10px;
    background-image: url('someurl');
    background-position: center right;
    background-repeat: no-repeat;
}
1 голос
/ 12 мая 2011

Я создал отдельный класс в моем листе 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>

Я думаю, что это легко и динамично. Одно изменение в одном месте, изменяет их все для этого связанного класса. Удачи!

...