当内部元素向左浮动时，将div右对齐

Question

我遇到了这个非常酷的向导菜单，但是我不知道如何将div右对齐。

http://www.emirplicanic.com/css/css-step-by-step-menu-wizard-style

<div class="wizard-steps">
  <div class="completed-step"><a href="#step-one"><span>1</span> Account Info</a></div>
  <div class="active-step"><a href="#step-two"><span>2</span> Contact Info</a></div>
  <div><a href="#"><span>3</span> Security Question</a></div>
  <div><a href="#"><span>4</span> Confirmation</a></div>
</div>

我猜这是因为在内部元素上设置了float：left。

我将不胜感激。

谢谢保罗

Answer 1

或者您可以将其修复为：

.cont{
    position: absolute;
    width: 550px;
    right: 0px;
}

然后将您的向导步骤放进去：

<div class="cont">
    <div class="wizard-steps">...</div>
</div>

---

然后编辑：

.cont{
    position: absolute;
    right: 0px;
}

然后更改：

.wizard-steps div {
    display: inline-block;
    position:relative;
}

Answer 2

您需要给它一个宽度。 如果没有明确的宽度，则其宽度为容器的100％。 无论您如何对齐，元素上的浮点都将停留在.wizard-steps的左侧。 因此，使其宽度小于100％，将其粘贴到右侧，它们将出现在新的左边缘。

要知道所有的位置：亲戚也要在那里。