JavaScript添加的div的左侧被切断了

Question

我正在动态添加一个＆＃34;侧面导航栏＆＃34;在我的页面上的固定位置。它增加了罚款，没有错误或警告。问题是，每个＆＃34; Circle＆＃34;的左侧。在我的导航栏似乎被切断了。这是非常微妙的，但我不想放手，想知道它为什么会发生。这就是我的意思：

正如你所看到的，它非常微妙，而且很小。＆＃34;但为什么会这样呢？

JSFiddle演示：http://jsfiddle.net/nymovqt5/5/

以下是添加导航栏的JS：

//initialize side nav bar
jQuery(document).ready(function() {
  var SideBar = document.createElement("Div");
  SideBar.setAttribute("id", "SideBarNav");

  var Circle1 = document.createElement("Div");
  Circle1.setAttribute("id", "Circle1");

  var Circle2 = document.createElement("Div");
  Circle2.setAttribute("id", "Circle2");

  var Circle3 = document.createElement("Div");
  Circle3.setAttribute("id", "Circle3");

  var Circle4 = document.createElement("Div");
  Circle4.setAttribute("id", "Circle4");

  var Circle5 = document.createElement("Div");
  Circle5.setAttribute("id", "Circle5");

  var Circle6 = document.createElement("Div");
  Circle6.setAttribute("id", "Circle6");

  SideBar.appendChild(Circle1);
  SideBar.appendChild(Circle2);
  SideBar.appendChild(Circle3);
  SideBar.appendChild(Circle4);
  SideBar.appendChild(Circle5);
  SideBar.appendChild(Circle6);
  document.body.appendChild(SideBar);

});

我的造型如下：

#Circle1:hover, #Circle2:hover, #Circle3:hover, #Circle4:hover, #Circle5:hover, #Circle6:hover{
 cursor: pointer;
}
#Circle1 {
    border-radius: 50px/50px;;
    height: 15px;
    width: 15px;
    margin: 0 auto;
    background: blue;
    opacity: 0.7;
    margin: 10px;
 opacity: .7;
}

#Circle2, #Circle3, #Circle4, #Circle5, #Circle6 {
    border-radius: 50px/50px;;
    height: 15px;
    width: 15px;
    margin: 0 auto;
    background: blue;
    opacity: 0.7;
    margin: 10px;
 opacity: .7;
}
#SideBarNav {
 display: inline-block;
 color: white;
 position: fixed;
 top: 50%;
 right: 0;
 transform: translate(-50%, -50%);
 text-align: center;
 border: 2px solid rgba(0, 0, 255, 0.5);
}

Answer 1

你正在制作一个假圆圈，在一个盒子里面画一个蓝色正方形，周围有一个白色边缘......然后使用带有弯角的白色边框覆盖在蓝色正方形的角落上，使蓝色位看似圆形。即白色边框必须是正确的尺寸，以正确的方式覆盖蓝色角落。

问题在于，方形加边距的总宽度是奇数个像素（35px），这意味着左侧可能与应用于该方面的内容略有不同（即一个像素）。右侧，这意味着一个较少的覆盖像素，因此再显示一个白色边缘像素。

将宽度更改为16px意味着正方形的每一边都是均匀的，您可以确定它会覆盖每一面。

Answer 2

从#sideBarNav中删除Transform属性。 您可以使用其他一些样式来定位它。 据我所知，变换属性一般会创建边框。