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 - 向右移动相对位置元素并将下一个元素移至其位置

回答

相关问题