Question

如何将文本放在页面右侧的按钮左侧，与文本大小无关？我现在正在使用绝对位置，但这可能不是一个很好的解决方案。

<nav class="someLine">
    <button type="button" class="back">Back</button>
    <text class="errorMsg">I'm an error!</text>
    <button type="button" class="continue">Continue</button>
</nav>

.errorMsg {
    color: red;
    font-weight: bold;
    font-style: italic;
    font-size: 10px;
    position: absolute;
    right: 120px;
    margin: 5px;
}

.someLine {
    position: relative;
    margin: 30px 0px;
    padding-top: 10px;
    border-top: 1px solid #DDD;
}

.continue, #btnAddProduct {
    position: absolute;
    right: 0px;
}

http://jsfiddle.net/h959khth/

感谢您的反馈！

Answer 1

我希望这需要你的甜食：

.errorMsg {
    color: red;
    font-weight: bold;
    font-style: italic;
    font-size: 10px;
    right: 120px;
    margin: 5px;
    position: relative;
    left: 4%
}

<强> Live Demo

Answer 2

您可以使用

浮动这两个元素

float: right;

然后他们将拥抱他们的父div的右边缘，无论它的大小如何。

如果你浮动它们，请确保在它们之后有一个元素

float: clear;

Answer 3

使用float prop代替position:absolute;。要使用浮动元素实现所需，您需要将position att设置为relative。参见演示：

DEMO

将按钮左侧的文本对齐，该按钮位于页面的右侧

3 个答案: