Question

只是简单介绍一下背景：我有一个模态，我的页面中有一个自定义的AngularJS指令。我一直在尝试将模态中的按钮固定在div的右侧，但无济于事。

我尝试过使用position：absolute，因为这就是其他解决方案所说的，但它对我不起作用。我做错了什么？

这是我的代码：

HTML：

<div class='readMore_title'>Welcome!</div></br>
    <div class='readMore_desc' style="padding:0px !important">
        <div class="question-content-wrapper">
        <div class="ng-modal-number-container">
            <div class="questionNumbers" ng-repeat="item in numberOfQuestions">
                <div class="questionNumberIcon" ng-style="item === currentQuestionIndex + 1 ? { 'background-color':'#455867', 'color': '#fff' } : {'background-color':'#fff', 'color': '#000 '}">{{item}}</div>
            </div>
        </div>
    </div>


    <div style="padding-left:12px;padding-top:23px;word-wrap:break-word" ng-if="showWelcomeMessage">
        <p class="wizard-welcome-message">
            Click "Next" to begin.
        </p>

        <div class="carousel-wizard-btn-container">
            <div class="carousel-wizard-buttons" ng-click="wizardPrevious()" ng-hide="currentQuestionIndex == 0">Previous</div>
            <div class="carousel-wizard-buttons" ng-click="disableWizardFeatures() || wizardNext()" ng-hide="currentQuestionIndex == wizardQuestionSet.length - 1" ng-disabled="showWelcomeMessage === true ? false : disableWizardFeatures()">Next</div>
            <div class="carousel-wizard-buttons" ng-click="disableWizardFeatures() || showResults() " ng-show="currentQuestionIndex == wizardQuestionSet.length - 1" ng-disabled="disableWizardFeatures()">Finish</div>
        </div>

    </div>


    <div style="word-wrap:break-word; padding-top:4px; padding-left:14px" ng-if="showWelcomeMessage === false ? true : false">
        <p class="wizard-question">
            <span style="font-family:'MetricWeb-Semibold'">Question {{currentQuestionIndex+1}}:</span>&nbsp;&nbsp;{{currentQuestionObject.question}}
        </p>

        <ul style="padding-left:30px;">
            <div>
                <li ng-repeat="query in currentQuestionObject.choices" style="padding-bottom:5px;">
                    <input class="TWInputField" name="{{currentQuestionObject.inputType}}" 
                   type="{{currentQuestionObject.inputType}}" id="{{query.id}}" 
                   ng-model="query.value" ng-change="changeOnSelection(query.value, query.id);choicesSelected = query.value"
                   ng-value="true">
                    <label for="{{query.id}}" style="font-family:'MetricWeb-Regular';font-size:17px;cursor:pointer">&nbsp;&nbsp;{{query.answer}}</label>
                </li>
                <p class="msg-required" ng-show="disableWizardFeatures()">Input is required.</p>

             <div class="carousel-wizard-btn-container">
                <div class="carousel-wizard-buttons" ng-click="wizardPrevious()" ng-hide="currentQuestionIndex == 0">Previous</div>
                <div class="carousel-wizard-buttons" ng-click="disableWizardFeatures() || wizardNext()" ng-hide="currentQuestionIndex == wizardQuestionSet.length - 1" ng-disabled="showWelcomeMessage === true ? false : disableWizardFeatures()">Next</div>
                <div class="carousel-wizard-buttons" ng-click="disableWizardFeatures() || showResults() " ng-show="currentQuestionIndex == wizardQuestionSet.length - 1" ng-disabled="disableWizardFeatures()">Finish</div>
            </div>

        </div>
    </ul>
    </div>

</div>

CSS：

div.carousel-wizard-btn-container {
    /*right:5%;*/
    bottom:3%;
    position:relative; /* It's "relative" because "absolute" makes it overlap with the content text.*/
}

div.carousel-wizard-buttons {
    background-color:#01a982;
    color:#fff;
    font-weight:bold;
    text-align:center;
    width:110px;
    display:inline-block;
    padding-top:8px;
    padding-bottom:8px;
    bottom:100px;
    font-family:'MetricWeb-Bold';
    cursor:pointer;
}

目前的情况如下：

任何帮助都会像往常一样受到赞赏（CSS并不是我的强项，可悲的是......）。

谢谢。

更新1：将carousel-wizard-btn-container的位置设为absolute会返回：

将按钮设置为float:right会返回：

更新2：按照Arthur的建议，将另一个div中的按钮包裹起来。结果就是这个。

几乎在那里，除了按钮在模态之外。 :(我试过将div放在包含问题的那个内部无济于事：

<div style="word-wrap:break-word; padding-top:4px; padding-left:14px" ng-if="showWelcomeMessage === false ? true : false">
    <p class="wizard-question">
       <span style="font-family:'MetricWeb-Semibold'">Question {{currentQuestionIndex+1}}:</span>&nbsp;&nbsp;{{currentQuestionObject.question}}
    </p>

    <ul style="padding-left:30px;">
        <div>
            <li ng-repeat="query in currentQuestionObject.choices" style="padding-bottom:5px;">
                <input class="TWInputField" name="{{currentQuestionObject.inputType}}" 
                   type="{{currentQuestionObject.inputType}}" id="{{query.id}}" 
                   ng-model="query.value" ng-change="changeOnSelection(query.value, query.id);choicesSelected = query.value"
                   ng-value="true">
                <label for="{{query.id}}" style="font-family:'MetricWeb-Regular';font-size:17px;cursor:pointer">&nbsp;&nbsp;{{query.answer}}</label>
            </li>
             <p class="msg-required" ng-show="disableWizardFeatures()">Input is required.</p>
        </div>
    </ul>

    <div style="float:right">
        <div class="carousel-wizard-btn-container">
            <div class="carousel-wizard-buttons" ng-click="wizardPrevious()" ng-hide="currentQuestionIndex == 0">Previous</div>
            <div class="carousel-wizard-buttons" ng-click="disableWizardFeatures() || wizardNext()" ng-hide="currentQuestionIndex == wizardQuestionSet.length - 1" ng-disabled="showWelcomeMessage === true ? false : disableWizardFeatures()">Next</div>
            <div class="carousel-wizard-buttons" ng-click="disableWizardFeatures() || showResults() " ng-show="currentQuestionIndex == wizardQuestionSet.length - 1" ng-disabled="disableWizardFeatures()">Finish</div>
        </div>
    </div>

</div>

Answer 1

如何浮动：对。如果您可以发布一个工作示例或链接，那将更容易，因为问题可能来自其他地方。

.carousel-wizard-buttons{
  float:right;
}

“位置：绝对”不能使div按钮粘贴到另一个div

1 个答案: