Question

为什么（在悬停时）下面会溢出到UL盒子上？

它不应该周围有3px的边框来防止这种情况发生吗？

enter image description here

这是标记

<!DOCTYPE html>

<html>

<head>

<style type="text/css">
#container {
    width: 200px;
    float: left;
    font-family: Arial;
    font-size: 10pt;
}
#one {
    height: 200px;
    border: 1px solid red;
    display: none
}
#two {
    width: 8px;
    height: 8px;
    border: 1px solid blue;
    float: left;
}
#menu, ul {
    list-style: none;
    padding: 3px;
    margin: 0;
    cursor: default;
    width: 200px;
}
#menu, ul, li {
    padding: 3px;
}
#menu li:hover{
    background: blue;
    color: #fff;
}
</style>

<script type="text/javascript">
 function showMenu(){
   document.getElementById("one").style.display="block";
 }
 function hideMenu(){
   document.getElementById("one").style.display="none";
 }
</script>

</head>

<body>

<div id="container">
    <div id="one" onclick="hideMenu()">
        <ul id="menu">
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
    </div>
</div>

<div id="two"><img src="images/arrow_double.png" onclick="showMenu()"></div>
</body>

</html>

Answer 1

您的主容器有width:200px：

#container {
   width: 200px;
}

然后在你设置一个width:200px和padding:3px对象的内部，它等于206px总宽度：

#menu, ul {
  padding: 3px;
  width: 200px;
}

您有两种解决方案：

使用此属性：这会使所有border和padding值都在固定宽度范围内。
```
 #menu, ul {
   box-sizing:border-box;
 }
```

两个修复你的宽度：

  #menu, ul {
    width:194px; /*200 - padding for both sides*/
    padding:3px; 
 }

Answer 2

你的div（#container）的宽度为200px，填充量为3px。你的ul也是200px宽。使用div中的填充，ul溢出div。这就是为什么当你将它悬停在它上面时它会超出div盒。

Answer 3

这是因为ul padding：3px 将其设置为0或更改框大小

Answer 4

您的容器宽200像素。菜单是200px宽+ 6px填充（每侧3个）。将菜单大小设置为194px宽或完全删除菜单宽度。

li盘旋溢出ul盒子

4 个答案: