0

我认为这是非常基本的 CSS 问题。

但这是小提琴，下面是代码

http://jsfiddle.net/G6pqC/

<!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 移到了右侧，现在我在第一行有了位置，但按钮 5 仍然在下一行。请问有人吗？

谢谢你的帮助

4

4 回答 4

1

你能增加#topDiv 的宽度吗？像这样：

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

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

于 2012-10-25T10:48:33.030 回答
1

给你 - 检查这个演示

#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-25T10:49:34.817 回答
1

好的，在 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-25T10:56:42.690 回答
0 
#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>

不知道这是否是你的追求，但在那里。​</p>

于 2012-10-25T10:56:45.490 回答