Aligment изображений в всплывающем окне

Question

по какой-то причине мне не удается отобразить 3 маленьких изображения рядом друг с другом в 1 строку.Они выровнены по вертикали.

Код выглядит так:

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

Объявите следующий класс в своей таблице стилей и используйте его в своем коде.

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

В демонстрационных целях я сделал ваш код более статичным: я использовал 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>

Подсказка - это гибкая колонка, расположенная абсолютнов случайной позиции на моей поддельной карте:

.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 представляет собой строку 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;
}

И я создал несколько случайных значков из сущностей 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

Answer 3

Исходя из вертикального стека, кажется, что ваш стиль <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;
}