[英]aligning a div to the right when the inside elements have float left
I came across this pretty cool wizard menu, but I can't figure out how to align the div to the right. 我遇到了这个非常酷的向导菜单,但是我不知道如何将div右对齐。
http://www.emirplicanic.com/css/css-step-by-step-menu-wizard-style 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>
I'm guessing that is because of the float: left that is set on the inside elements. 我猜这是因为在内部元素上设置了float:left。
I would appreciate some help. 我将不胜感激。
Thanks, Paul 谢谢保罗
or you can fix it as: 或者您可以将其修复为:
.cont{
position: absolute;
width: 550px;
right: 0px;
}
then put your wizard-steps inside: 然后将您的向导步骤放进去:
<div class="cont">
<div class="wizard-steps">...</div>
</div>
edit then: 然后编辑:
.cont{
position: absolute;
right: 0px;
}
then change: 然后更改:
.wizard-steps div {
display: inline-block;
position:relative;
}
You would need to give it a width. 您需要给它一个宽度。 Without an explicit width, it has a width of 100% of its container.
如果没有明确的宽度,则其宽度为容器的100%。 No matter how you align it, the float on the elements are going to stick to the left-hand side of .wizard-steps.
无论您如何对齐,元素上的浮点都将停留在.wizard-steps的左侧。 So make it less than 100% wide, stick it to the right and they will appear at the new left edge.
因此,使其宽度小于100%,将其粘贴到右侧,它们将出现在新的左边缘。
Be aware of all the position: relative going on in there as well. 要知道所有的位置:亲戚也要在那里。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.