Элементы, чтобы «выглядеть» как список маркеров внутри якорной ссылки

Question

Я создаю элемент на своей странице следующим образом:

<a href="">
<span class="benefits">
Free entry<br />
20% off in store<br />
First to know about latest courses
</span>
</a>

Клиент хочет, чтобы вся область была кликабельной, а список преимуществ отображался с помощью маркеров.

Поканасколько я знаю, списки не могут быть помещены в теги привязки?

Я надеялся, что смогу вставить тег перед рукой, чтобы я мог прикрепить правила типа стиля списка CSS, однако это не сработало.Затем я попытался сделать этот элемент фиксированной ширины и высоты с цветом фона, однако он не отображался должным образом в IE6 - который я должен поддерживать.

Есть идеи?

Answer 1

Попробуйте использовать символьную сущность HTML •, которая выглядит следующим образом: •

<a href="">
<span class="benefits">
&bull; Free entry<br />
&bull; 20% off in store<br />
&bull; First to know about latest courses
</span>
</a>

здесь больше символьных сущностей: http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

Answer 2

Может быть, что-то подобное может помочь:

a.error::before{    
    background-color: #be1c1c;
    border-radius: 1em;
    content: " ";
    display: inline-block;
    height: 0.35em;
    margin-right: 6px;
    width: 0.35em;
}
a.error{
    color:#be1c1c;
    text-decoration:none;
    display:block;
}
ul {
    padding:1em;
    display: block;
    list-style-type: disc;
}
ul li{
    color:#be1c1c;
}

My links:
<a class="error" href="#"> item 1</a>
<a class="error" href="#"> item 2</a>
<a class="error" href="#"> item 3</a>
<br>
My list:
<ul>
  <li> item 1</li>
  <li> item 2</li>
  <li> item 3</li>
</ul>

Надеюсь, это поможет!

Answer 3

Вы можете обернуть различные строки в промежутки с помощью класса, а затем использовать CSS для добавления декораций с помощью

1. Добавление левого отступа и присоединение фонового изображения.

2. Попробуйте использовать псевдо-класс: before и использовать CSS-содержимое для добавления в маркер.

3. Не могу вспомнить, работает ли это, но вытакже можно попробовать установить диапазон отображения = list-item и list-style-type = disc

Answer 4

Насколько я знаю, списки нельзя размещать внутри тегов привязки?

Вы правы в этом, и хотя браузеры могут не заботиться, это не правильный HTML.

Я бы предложил использовать DIV и сделать его кликабельным с помощью JavaScript. Вы все еще можете добавить обычную ссылку в DIV для удобства доступа. Таким образом, вы сохраняете всю семантику разметки (есть ссылка <a> и список <ul>) и в то же время получаете желаемый конечный результат.

HTML:

<div id="box1" class="box">
  <a href="link"> ... </a>
  <ul> ... </ul>
</div>

CSS:

.box {
  width: /* something */;
  height: /* something */;
  cursor: pointer;
}

JavaScript:

document.getElementById('box1').onclick = function() {
  window.location = 'link';
}

Answer 5

Почему бы просто не создать неупорядоченный список с таким же якорем внутри каждого элемента списка? Затем вы можете легко добавлять собственные маркеры внутри каждого тега привязки, чтобы маркеры можно было нажимать, и вы можете использовать отступы вместо полей, чтобы расположить якоря так, чтобы они все касались.

Answer 6

Установить отображение: блок для элемента A (якоря).Затем поместите в него список UL.