Elementi per 'sembrare' un elenco punto elenco all'interno di un link di ancoraggio

Question

sto creando un elemento sulla mia pagina in questo modo:

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

Il cliente vuole tutta l'area cliccabile, e l'elenco delle prestazioni da mostrare con punti elenco.

Per quanto ne so, gli elenchi non possono essere inseriti nei tag di ancoraggio?

Speravo di poter inserire un tag prima che potessi collegare le regole del tipo di stile lista css a quelle che non funzionavano. Ho provato quindi a rendere quell'elemento una larghezza e un'altezza fissa con un colore di sfondo, tuttavia, non è stato visualizzato correttamente in IE6, che devo supportare.

Qualche idea?

Answer 1

provare a utilizzare l'entità carattere HTML • che assomiglia a questo: •

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

più entità caratteri: http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

Answer 2

Imposta display: blocco per l'elemento A (ancora). Quindi metti la lista UL al suo interno.

Answer 3

Perché non creare una lista non ordinata con la stessa ancora all'interno di ogni elemento della lista? È quindi possibile aggiungere facilmente punti elenco personalizzati all'interno di ciascun tag di ancoraggio in modo che i punti elenco siano selezionabili e si può utilizzare il riempimento anziché i margini per distanziare gli ancoraggi in modo che tocchino tutti.

Answer 4

Per quanto mi liste consapevoli non posso essere inserito all'interno di tag di ancoraggio?

Hai ragione, e anche se i browser potrebbero non interessarti, non è un codice HTML valido.

Il mio suggerimento sarebbe quello di utilizzare un DIV e renderlo selezionabile tramite JavaScript. È comunque possibile aggiungere un collegamento normale all'interno del DIV per motivi di accessibilità. In questo modo, mantieni tutta la semantica del markup (c'è un collegamento <a> e un elenco <ul>) e tuttavia ottieni il risultato finale desiderato.

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

si può avvolgere le varie linee i n estende w/una classe, e quindi utilizzare i CSS per aggiungere le decorazioni da

1. Aggiunta in qualche padding sinistro e allegando un'immagine di sfondo.

2. Provare a utilizzare la prima pseudo classe e utilizzare il contenuto CSS per aggiungere il punto elenco.

3. non riesco a ricordare se questo funziona, ma si può anche provare a impostare la visualizzazione arco = list-item e list-style-type = disc

Answer 6

Forse qualcosa di simile potrebbe aiutare:

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>

Speranza che aiuta!