按钮Ionic Framework的重叠

时间:2015-03-04 12:19:36

标签: ionic-framework ionic

我是离子框架开发的新手。我使用网格布局创建了一个带图像按钮的页面。但相互重叠。

这是我的代码:

  <center>
  <br>
  <div class="row">
  <div class="col ">
  <a class="button button-clear" href="#/app/deals">
  <img src="img/bagnew.jpg" width="70%">
  </a>
  </div>
 <div class="col">
<a class="button button-clear" href="#/app/search">
<img src="img/search.jpg" width="70%">
</a>
</div>
</div>
</center>
<center>
<div class="row">
<div class="col ">
<a class="button button-clear" href="#/app/favourites">
<img src="img/star.jpg" width="80%" >
</a>
</div>
<div class="col">
<a class="button button-clear" href="#/app/news">
<img src="img/paper.jpg" width="70%" >
</a>
</div>
</div> 
</center>

星形和纸张图像按钮与bagnew和搜索图像按钮的一半重叠。

请帮忙。谢谢

1 个答案:

答案 0 :(得分:0)

Ionic在加载图片时使用了内置的css类,您可以尝试将item-image类添加到呈现图像的div。修改后的代码

  1. 包含两个列网格的col-50
  2. item-image在列中呈现图片。
  3. 已移除为width代码
  4. 指定的img

    整个更改后的代码如下:

    <div class="row">
     <div class="col col-50 item-image ">
      <a class="button button-clear" href="#/app/deals">
       <img src="img/bagnew.jpg">
      </a>
     </div>
     <div class="col col-50 item-image">
      <a class="button button-clear" href="#/app/search">
       <img src="img/search.jpg">
      </a>
     </div>
    </div>
    <div class="row">
       <div class="col col-50 item-image ">
        <a class="button button-clear" href="#/app/favourites">
         <img src="img/star.jpg">
        </a>
       </div>
       <div class="col col-50 item-image">
        <a class="button button-clear" href="#/app/news">
          <img src="img/paper.jpg">
        </a>
      </div>
    </div>