Question

我希望按钮显示为块状，但是按钮有时会向右摇摆，我不确定为什么我尝试了各种样式编辑，但似乎没有用我的代码有什么问题？

<div style="position:relative; overflow:visible">

        <div id="googleMap" ng-bind-html="maps" style=" white-space: nowrap;border:none"></div>

        <div style="display:block;margin: 0 auto;">

            <button disabled style="display:block; font-size:15px;width:250px;background-color: lightgrey; margin: 0 auto; margin-bottom:10px;margin-top:8px;height:70px;border: none">
                <a ng-href="https://maps.google.com/?q={{StoreModel.StoreAddress}}" target="_blank">
                    <i class="fa fa-map-marker" style="font-size:50px;float:left;transform: translate(0, 0);"></i>
                    <span ng-bind-html="StoreModel.StoreAddress"></span>
                </a>
            </button>

            <button disabled style="display:block; font-size:15px;width:250px;background-color: lightgrey; margin: 0 auto;margin-bottom:10px;height:70px;border: none">
                <i class="fa fa-phone" style="font-size:50px;float:left;transform: translate(0, 0);"></i>
                <span style="position:center;">
                    Phone
                    <span ng-if="isMobile == true">
                        <a href="tel:{{StoreModel.StoreMainPhone | EliminateSpaces}}"> {{StoreModel.StoreMainPhone | uppercase}} </a>
                    </span>
                    <span ng-if="isMobile == false">
                        <a href="tel:{{StoreModel.StoreMainPhone | EliminateSpaces}}">{{StoreModel.StoreMainPhone | uppercase}}</a>
                    </span>
                </span>
                <br />
                <span style="position:center">Fax {{StoreModel.StoreMainFax}}</span>
            </button>



            <a href="~/Appointment/Index/{{DiamondDetail.DiamondID}}">

                <md-button style="display:block;
                                  background-color: dodgerblue;
                                  margin: 0 auto;
                                  margin-bottom:10px;
                                  height:80px;" 
                  onclick="window.location.href='~/Appointment/Index.cshtml'"
                           class="button">
                    <span ng-bind-html="Appointment Request"
                          style="word-wrap: break-word;white-space: normal;">
                        Appointment Request
                    </span>
                </md-button>
            </a>


            <button disabled style="display:block; font-size:15px;width:250px;min-height:80px; background-color: lightgrey; margin: 0 auto;margin-bottom:10px;height:auto;white-space: normal;word-wrap: break-word;border: none">
                <span style="float:left;font-size-adjust:inherit;">Store Hours:</span>
                <br />
                <div ng-bind-html="StoreModel.StoreHours" style="word-wrap: break-word;white-space: normal;"></div>
            </button>

        </div>
    </div>

这是我有时得到的：

我想要什么

Answer 1

要调整您提供的代码，请将这些样式添加到您要设置样式的按钮的<a>标记中：

display:block; font-size:15px;width:250px;background-color: lightgrey; margin: 10px auto 20px; height:70px;border: none

这是最终结果：

<div style="position:relative; overflow:visible">

    <div id="googleMap" ng-bind-html="maps" style=" white-space: nowrap;border:none"></div>

    <div style="display:block;margin: 0 auto;">

        <button disabled style="display:block; font-size:15px;width:250px;background-color: lightgrey; margin: 0 auto; margin-bottom:10px;margin-top:8px;height:70px;border: none">
            <a ng-href="https://maps.google.com/?q={{StoreModel.StoreAddress}}" target="_blank">
                <i class="fa fa-map-marker" style="font-size:50px;float:left;transform: translate(0, 0);"></i>
                <span ng-bind-html="StoreModel.StoreAddress"></span>
            </a>
        </button>

        <button disabled style="display:block; font-size:15px;width:250px;background-color: lightgrey; margin: 0 auto;margin-bottom:10px;height:70px;border: none">
            <i class="fa fa-phone" style="font-size:50px;float:left;transform: translate(0, 0);"></i>
            <span style="position:center;">
                Phone
                <span ng-if="isMobile == true">
                    <a href="tel:{{StoreModel.StoreMainPhone | EliminateSpaces}}"> {{StoreModel.StoreMainPhone | uppercase}} </a>
                </span>
                <span ng-if="isMobile == false">
                    <a href="tel:{{StoreModel.StoreMainPhone | EliminateSpaces}}">{{StoreModel.StoreMainPhone | uppercase}}</a>
                </span>
            </span>
            <br />
            <span style="position:center">Fax {{StoreModel.StoreMainFax}}</span>
        </button>



        <a href="~/Appointment/Index/{{DiamondDetail.DiamondID}}" style="display:block; font-size:15px;width:250px;background-color: lightgrey; margin: 10px auto 20px; height:70px;border: none">

            <md-button style="display:block;
                              background-color: dodgerblue;
                              margin: 0 auto;
                              margin-bottom:10px;
                              height:80px;" 
              onclick="window.location.href='~/Appointment/Index.cshtml'"
                       class="button">
                <span ng-bind-html="Appointment Request"
                      style="word-wrap: break-word;white-space: normal;">
                    Appointment Request
                </span>
            </md-button>
        </a>


        <button disabled style="display:block; font-size:15px;width:250px;min-height:80px; background-color: lightgrey; margin: 10px auto;height:auto;white-space: normal;word-wrap: break-word;border: none">
            <span style="float:left;font-size-adjust:inherit;">Store Hours:</span>
            <br />
            <div ng-bind-html="StoreModel.StoreHours" style="word-wrap: break-word;white-space: normal;"></div>
        </button>

    </div>
</div>

希望这就是您要的。

按钮位置不断变化

1 个答案: