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


Mam link 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).

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 swobodnych lub stylów pozycji, link stanie się klikalny w przeglądarce Chrome i Firefox. (ale mój układ jest wyłączony).

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


15
2017-09-23 11:13


pochodzenie




Odpowiedzi:


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 jest 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 zakotwiczeniem. Jeśli to nie jest powód, zrób to samo z menucontainerem.

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

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


32
2017-09-23 11:23



Dziękuję za dobrze wyjaśnioną 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. - Per-Frode Pedersen


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


9
2017-09-23 11:24



Dziękuję Ci! Twoja odpowiedź pomogła! :) - yathrakaaran


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

Spróbuj tego . . .


7
2018-05-27 11:02



z-index naprawił to dla mnie. czemu? dzięki! - Chris P


Moje rozwiązanie: upewnij się, że indeks z przestępczego elementu div jest większy niż te wokół niego (które mogą być przepełnione).


1
2018-03-13 08:02



W niektórych przypadkach może to zadziałać, ale należy uważać, aby czasami to powodowało więcej problemów niż poprawek. Indeks z nie działa static "pozycjonowane" elementy. - Dan


Ustaw element z menucontainerem ID, aby mieć atrybut: clear i wartość: both lub conajmniej left.

Ten menadżut ID ID nachodzi na twój 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>


1
2018-02-01 20:01





Spróbuj tego

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;
}
​

działające demo


0
2017-09-23 11:25





Umieść to w swoich stylach

#menucontainer { clear: both; }

0
2017-09-23 11:23