HTML代码

＆＃13;

html, body {
  width: 100%;
  height: 100%;
  font-family: 'Roboto', sans-serif;
}

div.time {
  position: absolute;
  padding: 10px;
  display: inline-block;
  color: white;
  background-color: limegreen;
  box-sizing: border-box;
  left: 50%;
}

div.time:hover {
  cursor: pointer;
  border: 1px solid limegreen;
}


div.time > div {
  display: none;
  box-sizing: border-box;
}

div.time:hover {
  background-color: white;
  color: lightgrey;
}

div.time:hover > div {
  position: absolute;
  cursor: pointer;
  display: block;
  width: 100%;
  top:100%;
  left:0;
  background-color: white;
  border: 1px solid limegreen;
}

div.time > div > div {
  display: block;
  padding: 5px 10px 5px 10px;
  color: darkgrey;
}

div.time > div > div:hover {
  background-color: limegreen;
  color: white;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
  <div class="time">
    Time
    <div>
      <div>AM</div>
      <div>PM</div>
    </div>
  </div>
</body>
</html>
</body>
</html>

＆＃13;

为什么会发生这种情况，甚至认为菜单按钮和菜单项具有相同的宽度。他们两个都有相同的box-sizing：border-box属性？

Answer 1

您可以使用var parent_node_name = "EPLU200"; var onComplete = function(error) { if (error) { console.log('Synchronization failed'); } else { console.log('Synchronization succeeded'); } }; // update adds the data without replacing all of the other nodes myFirebaseRef.update({ parent_node_name: { // trying to change this part to not save as "parent_node_name" id2: "1175", // but instead as "EPLU200" ... } }, onComplete);，而不是将border用于下拉列表。在你的情况下，你应该有css：

outline

更改下拉div的大小的原因是边框。宽度是边框的额外宽度，它使得下拉格式的宽度与没有边框的主div的宽度相同。

Answer 2

如果不希望“边框”影响元素尺寸和/或位置，则使用轮廓而不是边框通常是一个不错的选择。（对于这个答案，凯恩1+。）另外，string [] F属性也允许一些非常好的效果。

如果由于某种原因你不想或不能使用轮廓，那么你也可以通过不指定那些内部div元素的宽度来解决这个问题，并将它们outline-offset置于“偏移“父边框对宽度计算的影响。

（这么简短的答案很长的代码片段; - ）

＆＃13;

left: -1px; right: -1px;

＆＃13;

html, body {
  width: 100%;
  height: 100%;
  font-family: 'Roboto', sans-serif;
}

div.time {
  position: absolute;
  padding: 10px;
  display: inline-block;
  color: white;
  background-color: limegreen;
  box-sizing: border-box;
  left: 50%;
}

div.time:hover {
  cursor: pointer;
  border: 1px solid limegreen;
}


div.time > div {
  display: none;
  box-sizing: border-box;
}

div.time:hover {
  background-color: white;
  color: lightgrey;
}

div.time:hover > div {
  position: absolute;
  cursor: pointer;
  display: block;
  /*width: 100%;*/    /* These are the only */
  top:100%;           
  left:-1px;          /* three changes      */
  right:-1px;         /* I made             */
  background-color: white;
  border: 1px solid limegreen;
}

div.time > div > div {
  display: block;
  padding: 5px 10px 5px 10px;
  color: darkgrey;
}

div.time > div > div:hover {
  background-color: limegreen;
  color: white;
}

＆＃13;

在边框菜单中，应用于菜单按钮和菜单项的边框未正确对齐

HTML代码

2 个答案: