Javascript 在传单弹出窗口中对齐图像

由于某些原因，我无法在一行中显示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);

var自定义选项=
{
“maxWidth”：“600”，
“宽度”：“400”，
“className”：“popupCustom”
}
var customPopup=“CenterTest

”；
L.marker（[“坐标”]，{icon:“myIcon”}）.addTo（“myLayer”）.bindPopup（customPopup，customOptions）；

---

似乎有一些css问题，但没有线索基于垂直堆栈，您的

“；

然后在某处添加css样式：

.popupCustom .popupMarker {
    display: inline-block;
}

---

在样式表中声明以下类并在代码中使用

.img-container {
    float: left;
    width: 33.33%;
    padding: 5px;
}

当我遇到类似的问题时，它对我起了作用

将代码更改为：

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

var customPopup=“CenterTest

---

出于演示目的，我使您的代码更加静态：我将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>

工具提示的底部箭头：

.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

容器是一个flex box行：

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

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

我从HTML实体中创建了一些随机图标：

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

这个实体图非常方便：

我还为图标创建了一个

：hover

状态：

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

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

---

我的JSBin:

你能发布你的css吗？当前正在应用哪些样式？如果没有更多的上下文和样式，诊断非常困难。您知道如何检查元素吗？如何使用浏览器的开发工具？