css：定位的文本和選擇框只有css

什麼是最好的方式來定位文本和選擇框水平爲25％+ 50％+ 25％與CSS只？css：定位的文本和選擇框只有css

這就是我們所擁有的：

<div id="mydiv">TextLeft <select id="myselectbox">...</select> TextRight</div>

我們希望TextLeft在區左的25％（寬度可以改變），使TextRight集中在大禁區右側25％，中心和<select id="myselectbox">...</select>居中。

如果可能，請僅限CSS。

謝謝。

來源

2014-05-20 Haradzieniec

如果你想在CSS更新和更改文本的位置動態，作爲頁面的變化，這是相當不可能僅僅使用CSS。 CSS不是一個有條件的，在後臺運行的語言。這就是JaveScript的用途。 – durbnpoisn

爲文本添加'span'，那麼它將更容易處理CSS中的元素。 –

@durbnpoisn爲什麼？ http://jsfiddle.net/QjvMj/ – Haradzieniec

沒有足夠的結構去做你在HTML中要求的東西。正如Atal提到的那樣，您可以添加跨度來處理它，如下所示：http://jsfiddle.net/wq35T/

使跨度內聯塊保留其寬度並保留邊距以保持它們在同一行上。還有其他方法可以解決這個問題，但這可能是沒有浮點數的最乾淨的代碼。

編輯：不是IE6/7高興。

<div id="mydiv"> 
    <span>TextLeft</span> 
    <select id="myselectbox">...</select> 
    <span>TextRight</span> 
</div>

CSS：

#mydiv { 
    text-align:center; 
} 

#mydiv > span { 
    width:25%; 
    display:inline-block; 
    margin-left:-4px; 
    text-align:center; 
} 

#myselectbox { 
    width:50%; 
}

來源

2014-05-20 19:10:30

希望我不遲到，但你用@Andrew Clody解決了這個問題 –

css：定位的文本和選擇框只有css

回答

相關問題