Znacznik zakotwiczenia staje się niedziałającym łączem w div z float: right;

Mam łącze wewnątrz elementu div, który unosi się na prawo od ekranu. Link nie działa w FF lub Chrome, ale działa w IE (testowałem tylko z IE8).Znacznik zakotwiczenia staje się niedziałającym łączem w div z float: right;

Najprostszy przykład wygląda następująco:

<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>

Jeśli usunąć dowolny ze stylów pływak lub pozycyjnych stylów, klikalny link staje w Chrome i Firefox. (ale mój układ jest wyłączony).

Moje pytanie brzmi: co to powoduje i czy istnieje niezawodny sposób na jego rozwiązanie?

Źródło

2010-09-23 Per-Frode Pedersen

Już wcześniej miałem ten sam problem. Po najechaniu kursorem na kotwicę kursor nie zmienia się na wskaźnik i nie można kliknąć łącza.

Za każdym razem było to spowodowane pozycjonowaniem elementu, który zachodzi na kotwicę, skutecznie stając się warstwą pomiędzy myszą a kotwicą. Zwykle jest to obraz taki jak ty.

Upewnij się, że obraz nie jest tak szeroki, że jego granica lub właściwość szerokości css nie pokrywa się z kotwicą. Jeśli to nie jest powód, zrób to samo z menucontainerem.

Czy używasz firebug do firefox? Jeśli nie, może pomóc odkryć wszelkie nakładające się problemy.

Mam pytanie w odpowiedzi dla Ciebie ... dlaczego względnie pozycjonujesz ul#menu bez zadeklarowania górnego, dolnego, lewego lub prawego atrybutu? Po prostu ciekawy. Nie jestem przyzwyczajony do widzenia tych, którzy tam nie są.

Źródło

2010-09-23 11:23:00 kevtrout

Dzięki za dobrze wyjaśnione odpowiedź. Aby odpowiedzieć na twoje pytanie: Wierzę, że ul # menu li.last zapewnia, że menu zaczyna się od prawej strony i rośnie w lewo. Wygląda na to, że pozycja: relative na menu ul # nie jest konieczna, i prawdopodobnie pozostała po kolejnej próbie na prawo uzasadniające menu. –

umieścić to do swoich stylów

#menucontainer { clear: both; }

Źródło

2010-09-23 11:23:48 Ventus

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

wydaje się to naprawić.

Wierzę w to, ponieważ pływaki nie są wyczyszczone, a ty nie określiłeś żadnych szerokości, więc dwa elementy pływające są "zachodzące na siebie".

Źródło

2010-09-23 11:24:05 Ross

Dziękujemy! Twoja odpowiedź pomogła! :) – yathrakaaran

Spróbuj

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

pracy

http://jsfiddle.net/C9r7f/

Źródło

2010-09-23 11:25:25

Moje rozwiązanie: upewnij się, że z-index div naruszającego jest większa niż wokół niego (które mogą być przepełnione).

Źródło

2013-03-13 08:02:41 Mikeymike

W niektórych przypadkach może to działać, ale bądź ostrożny, że czasami może to powodować więcej problemów niż poprawek. Indeks z nie działa na elementach "pozycjonowanych" "statycznych". – 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>

Wypróbuj tę. . .

Źródło

2014-05-27 11:02:03

z-index naprawił to za mnie. czemu? dzięki! –

Ustaw element za pomocą IDucontainer ID, aby mieć atrybut: clear i wartość: both lub conajmniej left.

He menucontainer ID pokrywa się z linkiem.

<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>

Źródło

2018-02-01 20:01:00

Znacznik zakotwiczenia staje się niedziałającym łączem w div z float: right;

Odpowiedz

Powiązane problemy