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％宽，将其粘在右侧，它们将出现在新的左边缘。

要注意所有的位置：相对的也在那里。

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

2 个答案: