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

我遇到了这个非常酷的向导菜单，但我无法弄清楚如何将div对齐到右侧。当内部元素向左浮动时，将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>

我猜这是因为浮动：左侧被设置在里面的元素。

我将不胜感激。

感谢，保罗

来源

2012-01-07 Paul

，或者您可以修复它为：

.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; 
}

来源

2012-01-07 15:37:06 Elen

谢谢，我在看，但我不能有修复宽度不幸。 – Paul 2012-01-07 15:42:53

我已经编辑了我的答案，但它不会在IE的某些早期版本中工作，但我认为你不会使用它？... – Elen 2012-01-07 16:17:33

谢谢Elen，现在越来越近了。我现在看到的唯一问题是在IE8中，这些步骤之间的空间不再存在。它在IE9和FF9中看起来不错。 – Paul 2012-01-07 16:30:26

你需要给它的宽度。没有明确的宽度，它的容器宽度为100％。无论你如何对齐它，元素上的浮点都会粘在.wizard步骤的左侧。因此，使它小于100％宽，将它贴在右边，它们会出现在新的左边缘。

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

来源

2012-01-07 15:24:15 Tom

问题是我无法设置固定宽度，因为该内容将被动态生成，因此它可能有3个步骤或10个步骤 – Paul 2012-01-07 15:41:57

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

回答

相关问题