html - 将箭头定位在 div 的中间

Question

我需要将箭头定位在 div 的顶部和中间。 div 的宽度动态变化，当我使用 left:%50 将箭头放在中间时，它会增加箭头的宽度，因此结果并不令人满意。

DEMO

代码

#wrapper {
  display: inline-block;
  position: absolute;
  padding: 1px;
  color: #000;
  border: 0px solid #cc3333;
  background-color: grey;
}
#wrapper em.out {
  position: absolute;
  left: 50%;
  top: -7px;
  display: block;
  background: transparent;
  border-left: 7px dashed transparent;
  border-right: 7px dashed transparent;
  border-bottom: 7px solid grey;
  overflow: hidden;
}
#wrapper em.inner {
  position: absolute;
  left: 50%;
  top: -7px;
  display: block;
  background: transparent;
  border-left: 7px dashed transparent;
  border-right: 7px dashed transparent;
  border-bottom: 7px solid grey;
  overflow: hidden;
}

<div id="wrapper">
  <em class="out"></em>
  <em class="inner"></em>
  <div>
    <div style="margin:1px;background-color:white;">
      <option>------John------</option>
    </div>
    <div style="margin:1px;background-color:white;">
      <option>------David------</option>
    </div>
    <div style="margin:1px;background-color:white;">
      <option>------Jennifer------</option>
    </div>
    <div style="margin:1px;background-color:white;">
      <option>------Sue------</option>
    </div>

  </div>
</div>

Answer 1

只需要在#wrapper em.inner&#wrapper em.out中添加transform: translate(-50%);类(class) !!就这么简单:)

#wrapper {
  display: inline-block;
  position: absolute;
  padding: 1px;
  color: #000;
  border: 0px solid #cc3333;
  background-color: grey;
}
#wrapper em.out {
  position: absolute;
  left: 50%;
  top: -7px;
  display: block;
  background: transparent;
  border-left: 7px dashed transparent;
  border-right: 7px dashed transparent;
  border-bottom: 7px solid grey;
  overflow: hidden;
  transform: translate(-50%);
}
#wrapper em.inner {
  position: absolute;
  left: 50%;
  top: -7px;
  display: block;
  background: transparent;
  border-left: 7px dashed transparent;
  border-right: 7px dashed transparent;
  border-bottom: 7px solid grey;
  overflow: hidden;
  transform: translate(-50%);
}

<div id="wrapper">
  <em class="out"></em>
  <em class="inner"></em>
  <div>
    <div style="margin:1px;background-color:white;">
      <option>------John Doe------</option>
    </div>
    <div style="margin:1px;background-color:white;">
      <option>------David------</option>
    </div>
    <div style="margin:1px;background-color:white;">
      <option>------Jennifer------</option>
    </div>
    <div style="margin:1px;background-color:white;">
      <option>------Sue------</option>
    </div>

  </div>
</div>