Question

由于某种原因，我无法在1行中显示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

基于垂直堆栈，看来您的<a>样式已被display: block;覆盖。您可以给每个<a>特定的类名，然后给它们display: inline-block使其水平堆叠。

首先，给<a>指定特定的类：

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

然后在某处添加CSS样式：

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

Answer 2

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

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

Answer 3

出于演示目的，我使您的代码更加静态：我将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列，它绝对位于我的假地图中的随机位置：

.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容器是一个弹性框行：

.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

传单弹出窗口中的图像匹配

3 个答案: