使用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>

來源

2013-05-19 user1032531

另一種方法是將元素設置爲絕對或相對位置。但浮動似乎是一個更好的方式來做到這一點。 – frenchie

@frenchie。謝謝。你可能是對的。我一直在用內嵌的詩句拼寫內嵌元素，並試圖讓我的手臂在他們周圍掙扎。 – user1032531

浮動應該工作正常，但你也可以使用絕對定位。

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

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

來源

2013-05-19 14:09:20

我有虛擬解決方案，你怎麼能做到這一點沒有絕對的位置，並且不會浮動：

#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

但不要忘記你必須避免內聯塊元素中的空白問題:)

來源

2013-05-19 14:16:16 GomatoX

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

使用CSS定位內聯元素

回答

相關問題