Question

对不起html，css和ionic中的初学者问题。我有填充问题。

我希望有像

这样的图片滑块

但是我的代码我得到了这个：

我希望红色框中的文字和图像像第一张图片一样起来。我尝试使用减去padding-top并在离子中使用css但是没有工作

这是我的代码：

 <ion-view view-title="Example">
  <ion-content class="padding">
   <ion-slide-box on-slide-changed="slideChanged(index)" show-pager="false" auto-play="true" does-continue="true">
          <ion-slide>
              <h3>Favourite</h3>
               <div class="row">
                    <div class="ion-ios-arrow-back col col-5" style="padding-top:50px;"/></div>
                    <span class="row">
                        <img src="img/pizza1.jpg" class="col col-50" style="width:100px; height:100px;">
                        <div class="col col-50" style="; padding-top:-10px">
                            <h4 class="row">Image One </h4>
                            <div class="row">
                                <img src="img/star.jpg" style="width:50px; height:50px; padding-top:-10px"class="col col-40">
                                <h4 class="col col-60" style="padding-top:-10px"> 5.0</h4>
                            </div>
                        </div>
                    </span>
                    <div class="ion-ios-arrow-forward col-5" style="padding-top:50px;"/></div>
                </div>
          </ion-slide>
          <ion-slide>
           <h3>Favourite</h3>
               <div class="row">
                    <div class="ion-ios-arrow-back col col-5" style="padding-top:50px;"/></div>
                    <span class="row">
                        <img src="img/pizza2.jpg" class="col col-50" style="width:100px; height:100px;">
                        <div class="col col-50" style="; padding-top:-10px">
                            <h4 class="row">Image Two </h4>
                            <div class="row">
                                <img src="img/star.jpg" style="width:50px; height:50px; padding-top:-10px"class="col col-40">
                                <h4 class="col col-60"> 5.0</h4>
                            </div>
                        </div>
                    </span>
                    <div class="ion-ios-arrow-forward col-5" style="padding-top:50px;"/></div>
                </div>
          </ion-slide>
          <ion-slide>
          <h3>Favourite</h3>
               <div class="row">
                    <div class="ion-ios-arrow-back col col-5" style="padding-top:50px;"/></div>
                    <span class="row">
                        <img src="img/pizza3.jpg" class="col col-50" style="width:100px; height:100px;">
                        <div class="col col-50" style="; padding-top:-10px">
                            <h4 class="row">Image Three </h4>
                            <div class="row">
                                <img src="img/star.jpg" style="width:50px; height:50px; padding-top:-10px"class="col col-40">
                                <h4 class="col col-60"> 5.0</h4>
                            </div>
                        </div>
                    </span>
                    <div class="ion-ios-arrow-forward col-5" style="padding-top:50px;"/></div>
                </div>
            </ion-slide>
        </ion-slide-box>
 </ion-content>
</ion-view>

此外，我尝试使用此修改ionic.app.css但不起作用：

<div class="row row-up">

 .row-up{
  padding:-10px; }
 }

...谢谢

Answer 1

没有负面padding这样的东西。请改为margin-top: -10px。

填充离子滑块

1 个答案: