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

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 (якорь). Затем поместите в него список UL.

Answer 3

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

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

Вы можете обернуть различные линии я п охватывает ж/класс, а затем использовать CSS, чтобы добавить украшения на

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

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

3. Я не могу вспомнить, если это работает, но вы также можете попробовать установить дисплей диапазона = элемент списка и список стиль типа = диск

Answer 6

Может быть что-то вроде этого могут помочь:

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>

Надеется, что это поможет!