CSS - 向右移動相對位置元素並將下一個元素移至其位置

我認爲這是非常基本的CSS問題。CSS - 向右移動相對位置元素並將下一個元素移至其位置

但這裏是小提琴和下面是代碼

<!DOCTYPE html> 
<html> 
<head> 
<style> 

#topDiv { 
    width:280px; 
    height:500px; 
    background-color:red; 
} 

.element{ 
    position:relative; 
    right :100px; 
} 

</style> 
</head> 

<body> 
<div id="topDiv"> 
    <input type="button" value="button1" /> 
    <input type="button" value="button2" /> 
    <input type="button" value="button3" /> 
    <input class='element' type="button" value="button4" /> 
    <input type="button" value="button5" /> 
</div> 

</body> 

</html>

我能知道如何button5移動到第一線作爲最後一個元素？我將按鈕4移到右側，現在我已經放置在第一行了，但是仍然button5將進入下一行。任何一個請嗎？

感謝您的幫助

來源

2012-10-25 Bujji

它們全都在一行上，按鈕2上方是按鈕4.您是否試圖在同一行上獲取全部5行？ –

感謝您的迴應Rick和Yes Button5也與結尾元素相同，不增加DIV寬度。 – Bujji

您可以增加#topDiv的寬度嗎？就像這樣：

#topDiv { 
    width:320px; 
    height:500px; 
    background-color:red; 
}

http://jsfiddle.net/G6pqC/1/

來源

2012-10-25 10:48:33 Chris

不，對不起，寬度是固定的 – Bujji

我想到了這種情況，我們合併了三個元素，並且下一個元素沒有佔用可用空間 – Bujji

試着給#topDiv添加'white-space：nowrap;'像這樣：http： //jsfiddle.net/G6pqC/4/。瘋狂的黑客。 – Chris

在這裏你去 - 選中此Demo

#topDiv { 
    width:280px; 
    height:500px; 
    background-color:red; 
} 

input[type="button"]{ margin: 0 0 0 -4px; } 
input[type="button"]:first-child { margin: 0; }

來源

2012-10-25 10:49:34 Dipak

謝謝迪帕克，這可以幫助我解決這個問題。但從概念上來看，我無法將button5移動到button4的位置，僅僅通過使用button5即可。我的意思是當我將button4移到右邊時，我有了button4的空間，所以應該有一些方法來佔用那個空間而不修改其他元素。 – Bujji

好，裝在Firefox，現在我看到它。只需調整按鈕上的字體大小即可。

.element{ 
font-size:11px; 
float:left; 
margin-right:5px; 
} 
#topDiv { 
width:280px; 
height:500px; 
background-color:red; 
position:relative; 
} 

.moved{position:absolute;right:150px;} 

<!DOCTYPE html> 
<html> 
<body> 
<div id="topDiv"> 
<input class='element' type="button" value="button1" /> 
<input class='element' type="button" value="button2" /> 
<input class='element' type="button" value="button3" /> 
<input class='element moved' type="button" value="button4" /> 
<input class='element' type="button" value="button5" /> 
</div> 

</body> 

</html>

來源

2012-10-25 10:56:42

謝謝瑞克，這可以幫助我完成這個確切的場景。但從概念上來看，我無法將button5移動到button4的位置，僅僅通過使用button5即可。我的意思是當我將button4移到右邊時，我有了button4的空間，所以應該有一些方法來佔用那個空間而不修改其他元素。 – Bujji

看到編輯，浮動他們會讓他們佔據空間，你必須絕對地定位移動的按鈕，但它不會工作。 –

謝謝瑞克。我們必須使用絕對位置。我遵循的技巧是jsfiddle.net/G6pqC/8。再次感謝給我快速解決方案 – Bujji

#topDiv { 
width:280px; 
height:500px; 
background-color:red; 
} 

.element{ 
float: right; 

} 
<!DOCTYPE html> 
<html> 
<body> 
<div id="topDiv"> 
<input class='element' type="button" value="button1" /> 
<input class='element' type="button" value="button2" /> 
<input class='element' type="button" value="button3" /> 
<input class='element' type="button" value="button4" /> 
<input class='element'type="button" value="button5" /> 
</div> 

</body> 

</html>

不知道如果這是烏拉圭回合後，但在那裏。

來源

2012-10-25 10:56:45 Lonergan6275

謝謝Lonergan ..但這不是一個。請看Chris解決方案 – Bujji

CSS - 向右移動相對位置元素並將下一個元素移至其位置

回答

相關問題