在div

Question

我需要在顶部和中间以及div中定位箭头。 div的宽度动态变化，当我使用left：％50将箭头置于中间时，它会增加箭头的宽度，因此结果不理想。

DEMO

CODE

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您只需在transform: translate(-50%);＆amp;中添加#wrapper em.inner即可。 #wrapper em.out上课!!就这么简单：）

＆＃13;

＆＃13;

#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%);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;