Положение кнопки меняет положение - PullRequest
Новая
       10

Положение кнопки меняет положение

0 голосов
/ 09 апреля 2019

Я бы хотел, чтобы моя кнопка отображалась в виде блока, но кнопка время от времени качается вправо, и я не уверен, почему я пробовал различные изменения стиля, но ни одна из них не работает. В чем проблема с моим кодом? 

<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>

Это то, что я иногда получаю: Button Displaying on right

Что я хочу This is how I want the button displayed

1 Ответ

0 голосов
/ 12 апреля 2019

Чтобы скорректировать код, который вы указали, я бы добавил эти стили к тегу <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>

Надеюсь, что это то, что вы просили.

...