Il tag di ancoraggio diventa un collegamento non funzionante in un div con float: right;

Ho un collegamento all'interno di un div che si trova a destra dello schermo. Il collegamento non funziona in FF o Chrome, ma funziona in IE (sono stati testati solo con IE8).Il tag di ancoraggio diventa un collegamento non funzionante in un div con float: right;

L'esempio più semplice si presenta così:

<html> 
<head> 
<title>test</title> 
<style type="text/css"> 
#logo { 
left:10px; 
float:left; 
top:10px; 
} 
#feedback { 
float: right; 
} 
ul#menu 
{ 
    position:relative; 
} 
ul#menu li 
{ 
    display: inline; 
    list-style: none;  
} 
ul#menu li.last { 
    margin-right: 50px; 
} 
</style> 
</head> 
<body> 
<div class="page"> 
<div id="header"> 
    <div id="logo">logo</div> 
    <div id="feedback"><a href="http://www.norge.no">test link</a></div> 
    <div id="menucontainer"><ul id="menu"><li>test 1<li>test2</ul></div> 
</div> 
</div> 

</body>

se rimuovere qualsiasi degli stili stili galleggiante o la posizione, il collegamento diventa cliccabile in Chrome e Firefox. (ma poi il mio layout è disattivato).

La mia domanda è: che cosa sta causando questo, e c'è un modo affidabile per risolverlo?

fonte

2010-09-23 Per-Frode Pedersen

Ho avuto lo stesso problema prima. Quando si passa con il mouse sull'ancora, il cursore non cambia al puntatore e non è possibile fare clic sul collegamento.

Ogni volta, è stato a causa di un elemento posizionato che si sovrappone all'ancora, diventando effettivamente uno strato tra il mouse e l'ancora. Di solito è un'immagine come la tua.

Assicurarsi che l'immagine non sia così ampia da non essere sovrapposta all'ancora. Se questo non è il motivo, fai lo stesso con il menucontainer.

Utilizzi firebug per firefox? In caso contrario, potrebbe aiutare a scoprire eventuali problemi sovrapposti.

Ho una domanda all'interno di una risposta per te ... perché stai posizionando lo ul#menu senza dichiarare un attributo superiore, inferiore, sinistro o destro? Solo curioso. Non sono abituato a vedere quelli che non sono lì.

fonte

2010-09-23 11:23:00 kevtrout

Grazie per una risposta ben spiegato. Per rispondere alla tua domanda: credo che il menu ul.last si assicuri che il menu inizi da destra e cresca verso sinistra. Sembra che la posizione: relativa sul menu ul # non sia necessaria, ed è probabilmente rimandata da un altro tentativo di giustificazione a destra del menu. –

mettere questo i vostri stili

#menucontainer { clear: both; }

fonte

2010-09-23 11:23:48 Ventus

ul#menu 
{ 
    position:relative; 
    overflow:auto; 
}

sembra risolvere il problema.

Credo che sia perché i float non vengono cancellati e non hai specificato alcuna larghezza, quindi i due elementi flottanti sono "sovrapposti".

fonte

2010-09-23 11:24:05 Ross

Grazie! La tua risposta ha aiutato! :) – yathrakaaran

Prova questo

HTML

<html> 
    <head> 
    </head> 
    <body> 
     <div class="page"> 
      <div id="header"> 
       <div id="logo">logo</div> 
       <div id="feedback"><a href="http://www.norge.no">test link</a></div> 
       <br class="clear" /> 
       <div id="menucontainer"> 
        <ul id="menu" class="clear"> 
         <li>test 1</li> 
         <li>test2</li> 
        </ul> 
       </div> 
      </div> 
     </div> 
     </body> 
</html>

css

.clear{ 
    clear:both; 
} 
#logo { 
    float:left; 
    margin:10px; 
} 

#feedback { 
    float: right; 
} 

ul#menu 
{ 
} 
ul#menu li 
{ 
    float:left; 
} 
ul#menu li a{ 
    display:block; 
} 
ul#menu li.last { 
    margin-right: 50px; 
}

demo

lavoro

http://jsfiddle.net/C9r7f/

fonte

2010-09-23 11:25:25

La mia soluzione: assicurarsi che lo z-index del div incriminato è maggiore di quelli intorno a esso (che può essere traboccante).

fonte

2013-03-13 08:02:41 Mikeymike

In alcuni casi questo può funzionare, ma fai attenzione che a volte questo può causare più problemi di correzioni. E z-index non funziona su elementi 'static'" posizionati ". – Dan

<h4 style="float: right; position:relative; z-index:5;"> 
    <a href="#company" data-slide="prev">company</a> 
    <a href="#city" data-slide="next">city</a> 
</h4>

Prova questo. . .

fonte

2014-05-27 11:02:03

z-index lo ha risolto per me. perché? grazie! –

Impostare l'elemento con il menucontainer ID per avere l'attributo: clear e il valore: entrambi, o almeno a sinistra.

He ID menucontainer si sovrappone al tuo link.

<html> 
 
<head> 
 
<title>test</title> 
 
<style type="text/css"> 
 
#logo { 
 
left:10px; 
 
float:left; 
 
top:10px; 
 
background-color:red; 
 
} 
 
#feedback { 
 
float: right; 
 
background-color:yellow; 
 
} 
 
ul#menu 
 
{ 
 
    position:relative; 
 
} 
 
ul#menu li 
 
{ 
 
    display: inline; 
 
    list-style: none;  
 
} 
 
ul#menu li.last { 
 
    margin-right: 50px; 
 
} 
 
#menucontainer { 
 
clear:left; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="page"> 
 
<div id="header"> 
 
    <div id="logo">logo</div> 
 
    <div id="feedback"><a href="http://www.norge.no">test link</a></div> 
 
    <div id="menucontainer"><ul id="menu"><li>test 1<li>test2</ul></div> 
 
</div> 
 
</div> 
 

 
</body>

fonte

2018-02-01 20:01:00

Il tag di ancoraggio diventa un collegamento non funzionante in un div con float: right;

risposta

Problemi correlati