Question

我在每列中都有4个按钮和文字排列。（见下图）我的问题是按钮的文字标题离图标太远了。我的css：

.ButtonPDetails {
        font-size:10px !important;
        overflow: hidden;
        white-space: nowrap;
    }
    .col{
        text-align:center !important;
    }
    .rowL{
        padding-bottom:0px !important;
        margin:0px !important;
    }
    .my-icon:before,
    .my-icon{
        font-size:20px !important;
        display:block !important;
        line-height: 40px !important;
    }

这是我的html：

 <div class="row rowL">
                <div class="col">
                    <a href="" class="button button-icon  ButtonPDetails">
                        <i class="icon ion-bag my-icon" style="padding: 0px;margin: 0px"></i>
                        {{$root.themeConfig.lblPlaceOrder}}
                    </a>
                </div>
                <div class="col">
                    <a href="" class="button button-icon  ButtonPDetails">
                        <i class="icon ion-ios-cart my-icon" style="padding: 0px;margin: 0px"></i>
                        {{$root.themeConfig.lblAddToCart}}
                    </a>
                </div>
                <div class="col">
                    <a href="" class="button button-icon  ButtonPDetails">
                        <i class="icon ion-ios-information-outline my-icon" style="padding: 0px;margin: 0px"></i>
                        {{$root.themeConfig.lblInfo}}
                    </a>
                </div>
                <div class="col">
                    <a href="" class="button button-icon  ButtonPDetails">
                        <i class="icon ion-android-globe my-icon" style="padding: 0px;margin: 0px"></i>
                        {{$root.themeConfig.lblShare}}
                    </a>
                </div>
            </div>

我希望按钮和文本之间的距离约为5px。

请帮我解决这个问题。

Answer 1

如果您无法访问生成的HTML / CSS，这些内容会在{{ }}标记内呈现内容，这是真正的罪魁祸首，那么您可以通过修改CSS来解决它为我的图标

.my-icon {
    font-size:20px !important;
    display:block !important;
    line-height: 40px !important;
    padding: 0px !important;
    margin: 0px 0px -20px !important; /* top, right/left, bottom */
 }

并删除HTML中的CSS内联。

-20px底部边距可以补偿生成的HTML添加的填充。

按钮和文字距离太远

1 个答案: