列出可用图像的项目

时间:2016-06-19 18:55:53

标签: html css

这个Meteor客户端html有两个问题 第一个是带有长字符串的this.label与下一个列表项重叠 第二个是当没有图像可用时,this.image占位符存在 由于此代码通常会在智能手机上运行。如何解决这些问题?长字符串不重叠但扩展其自己的列表项容器并删除图像占位符以在没有可用图像的情况下提供更多空间。
图像需要位于标签的左侧并垂直居中。感谢

.item-label {
  position: fixed;
  left: 5em;
  padding - top: .6em;
}

#items {
  margin: 1em;
}

#itemsFilter {
  margin - bottom: 1em;
}

li {
  list - style - type: none;
}
<template name="items">
  <div id="items">
    <input id="itemsFilter" type="text" placeholder="Start typing, fast find">{{#each values}}
    <li class="items">
      <img class="item-icons" src="/{{this.image}}.gif">
      <span class="item-label">{{this.label}}</span>
    </li>
    {{/each}}
  </div>
</template>

0 个答案:

没有答案