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

さて、それを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 に答える
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 に答える
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 に答える