javascript - 传单弹出窗口中的图像对齐

Question

出于某种原因，我无法在一行中显示 3 个并排的小图像。它们垂直对齐。

代码是这样的:

var customOptions =
{
'maxWidth': '600',
'width': '400',
'className' : 'popupCustom'
}

var customPopup = "<b>Center</b>Test<br><br><div><center><a href=pinlisting.php?hideid=><img src=images/hide.png height=15.5 width=18></a><a href=delete2.php?delete&pin_db_id=1><img src=images/delete.png height=15.5 width=18></a><a href=index.php><img src=images/zoom.png height=15.5 width=18></a></center></div>";

L.marker(["coordinates"], {icon: "myIcon"}).addTo("myLayer").bindPopup(customPopup,customOptions);

似乎是一些 css 问题，但没有线索

Answer 1

出于演示目的，我使您的代码更加静态:我将 HTML 和 CSS 与 flexbox 一起使用，它们可以很容易地转换为由某些 JS 生成:

  <div class="map">
    <h3>Map with Tooltip</h3>
    <div class="tooltip">
      <div class="arrow"></div>
      <div class="title">Title</div>
      <div class="desc">Description</div>
      <div class="icons">
        <a href="#">
          <span class="icon icon-eye"></span>
        </a>
        <a href="#">
          <span class="icon icon-trash"></span>
        </a>
        <a href="#">
          <span class="icon icon-zoom"></span>
        </a>
      </div>
    </div>
  </div>

工具提示是一个 flex 列，绝对位于我的假 map 中的随机位置:

.tooltip {
  display:flex;
  flex-direction:column;
  background:#ccc;
  width:100px; height:100px;
  position:absolute; top:20%; left:56%;
  padding:10px;
  border-radius:10px;
  box-shadow:0 0.25em 1em 0 rgba(0,0,0,0.5);
}

工具提示的底部箭头:

.arrow {
  display:block;
  background:transparent;
  width:0;
  height:0;
  position:absolute;
  bottom:-25px;
  left:50%;
  margin-left:-15px;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top:30px solid #ccc;
}

CENTER 元素已经被弃用了，真的没有理由再使用它了，我们现在在 CSS 中失去了强大的新定位和布局工具，所以 .icons 容器是一个 flexbox 行:

.icons {
  flex:1 0 0;
  display:flex;
  flex-direction:row;
  justify-content:space-evenly;
  align-items:stretch;
  align-content:center;
}

每个图标链接共享此 CSS 规则:

.icons a {
  flex:1 1 20px;
  border-radius:0.25em;
  background:white;
  box-shadow:0 0.125em 0.125em 0 rgba(0,0,0,0.25);
  padding:0.25em 0.125em;
  margin:1px;
  width:1em; height:1em;
  text-align:center;
  vertical-align:middle;
  line-height:1;
}

您需要覆盖图标的默认链接样式:

a, .icon {
  color:black;
  text-decoration:none;
}

然后我从 HTML 实体创建了一些随机图标:

.icon-eye:before {
  content:"\0260E";
}
.icon-trash:before {
  content:"\02605";
}
.icon-zoom:before {
  content:"\02665";
}

这个实体图表非常方便:https://dev.w3.org/html5/html-author/charref

我还为图标创建了一个 :hover 状态:

.icons a:hover {
  box-shadow:0 1px 0 0 rgba(0,0,0,0.125);
}

我的 JSBin:http://jsbin.com/saxivi/edit?html,css,output