當內部元素向左浮動時，將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％，將其粘貼到右側，它們將出現在新的左邊緣。

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