Html 锚标记在带有 float: right 的 div 中变为非工作链接；
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3777714/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Anchor tag becomes non-working link in a div with float: right;
提问by Per-Frode Pedersen
I have a link inside a div that floats to the right of the screen. The link does not work in FF or Chrome, but works in IE (have only tested with IE8).
我在浮动到屏幕右侧的 div 中有一个链接。该链接在 FF 或 Chrome 中不起作用，但在 IE 中有效（仅使用 IE8 进行了测试）。
The simplest example looks like this:
最简单的示例如下所示：
<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>
If i remove any of the float styles or position styles, the link becomes clickable in Chrome and Firefox. (but then my layout is off).
如果我删除任何浮动样式或位置样式，该链接将在 Chrome 和 Firefox 中变得可点击。（但后来我的布局关闭了）。
My question is: What's causing this, and is there a reliable way to solve it?
我的问题是：这是什么原因造成的，是否有可靠的方法来解决？
回答by kevtrout
I've had the same problem before. When you hover over the anchor, the cursor doesn't change to the pointer, and you can't click on the link.
我以前也遇到过同样的问题。当您将鼠标悬停在锚点上时，光标不会更改为指针，并且您无法单击链接。
Every time, it has been due to a positioned element that overlaps the anchor, effectively becoming a layer between the mouse and the anchor. Usually it is an image like you have.
每一次，都是由于定位元素与锚点重叠，有效地成为鼠标和锚点之间的层。通常它是像您一样的图像。
Make sure that the image isn't so wide that it's boundary or css width property isn't overlapping the anchor. If that isn't the reason, do the same with the menucontainer.
确保图像不会太宽以至于它的边界或 css 宽度属性没有与锚点重叠。如果这不是原因，请对 menucontainer 执行相同操作。
Do you use firebug for firefox? If not, it might help discover any overlapping issues.
你在firefox上使用firebug吗？如果没有，它可能有助于发现任何重叠的问题。
I have a question within an answer for you...why are you relatively positioning the ul#menuwithout declaring a top,bottom,left, or right attribute? Just curious. I'm not used to seeing those not there.
我有一个问题在你的答案中......为什么你在ul#menu没有声明顶部、底部、左侧或右侧属性的情况下相对定位？只是好奇。我不习惯看到那些不在那里的人。
回答by Ross
ul#menu
{
position:relative;
overflow:auto;
}
appears to fix it.
似乎修复它。
I believe its because the floats aren't cleared, and you haven't specified any widths, so the two floated elements are "overlapping".
我相信这是因为浮动没有清除，并且您没有指定任何宽度，所以两个浮动元素是“重叠的”。
回答by Irshad Khan
<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>
Try this one . . .
试试这个。. .
回答by IONEL VALENTIN
Set the element with the ID menucontainer to have the attribute: clear and the value: both, or at least left.
将 ID 为 menucontainer 的元素设置为具有属性：clear 和值：both，或至少 left。
He ID menucontainer overlaps your link.
他的 ID 菜单容器与您的链接重叠。
<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>回答by Mikeymike
My solution: make sure the z-index of the offending div is greater than those around it (that may be overflowing).
我的解决方案：确保有问题的 div 的 z-index 大于它周围的 z-index（可能会溢出）。
回答by Pramendra Gupta
Try this
尝试这个
HTML
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
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;
}
?
working demo
工作演示
回答by Ventus
Put this to your styles
把它放到你的风格中
#menucontainer { clear: both; }
