Блог

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

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

#html #css #asp.net-mvc #razor #html-lists

#HTML #css #asp.net-mvc #razor #html-списки

Вопрос:

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

Комментарии:

1. Используйте CSS для добавления пробела

2. Действительно? Изображения-разделители? Есть ли какая -либо ситуация, когда gif-разделитель является лучшим выбором, чем CSS?

3. В чем причина отрицательного голосования по вопросу? Конечно, я ошибался насчет кодирования изображений в html, но, тем не менее, это был законный вопрос, и я узнал об этом из опубликованных ответов.

Ответ №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>

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