#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>
Я думаю, что это просто и динамично. Одно изменение в одном месте изменяет их все для этого связанного класса. Удачи!