使用CSS定位内联元素

问题描述：

我想在#myDiv的最左侧定位#myLabel，并在#myDiv的最右侧定位#myA，并将它们保持在同一行。我明白我可以使#myLabel和#myA块元素左右浮动。有没有更适合的方法来做到这一点？使用CSS定位内联元素

<div id="myDiv" style="width:500px"> 
    <label id="myLabel">My Label</label> 
    <a id="myA" href="clickme.html">Click Me</a> 
</div>

另一种方法是将元素设置为绝对或相对位置。但浮动似乎是一个更好的方式来做到这一点。 – frenchie

@frenchie。谢谢。你可能是对的。我一直在用内嵌的诗句拼写内嵌元素，并试图让我的手臂在他们周围挣扎。 – user1032531

答

浮动应该工作正常，但你也可以使用绝对定位。

#myDiv { 
    position: relative; 
} 
#myLabel { 
    position: absolute; 
    left: 0; 
} 
#myA { 
    position: absolute; 
    right: 0; 
}

http://jsfiddle.net/ExplosionPIlls/gaCQp/1/

答

我有虚拟解决方案，你怎么能做到这一点没有绝对的位置，并且不会浮动：

#myLabel { 
    display: inline-block; 
    text-align: left; 
    width: 50%; 
} 

#myA { 
    display: inline-block; 
    text-align: right; 
    width: 50%; 
} 
#myDiv { 
    border: 1px solid #000; 
    padding: 10px; 
    text-align: center; 
}

这里有一个例子：

http://jsbin.com/alidim/2/edit

但不要忘记你必须避免内联块元素中的空白问题:)

谢谢，有很多方法可以做同样的事情！ – user1032531

使用CSS定位内联元素

相关推荐