使用CSS移動元素

YOU如何更改CSS以將其移至頁面的另一部分？使用CSS移動元素

這裏是我使用的圖像：http://www.frysa.us/switch.gif

功能：

<script type="text/javascript" src="jquery.js" charset="utf-8"></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 
$(".cb-enable").click(function(){ 
    var parent = $(this).parents('.switch'); 
    $('.cb-disable',parent).removeClass('selected'); 
    $(this).addClass('selected'); 
    $('.checkbox',parent).attr('checked', true); 
}); 
$(".cb-disable").click(function(){ 
    var parent = $(this).parents('.switch'); 
    $('.cb-enable',parent).removeClass('selected'); 
    $(this).addClass('selected'); 
    $('.checkbox',parent).attr('checked', false); 
}); 
});

.gif文件的重複性質似乎亂了定位我。

我想它在出現在右邊多一點

<style type="text/css"> 
* { margin: 0; padding: 0: } 

body { font-family: Arial, Sans-serif; } 
.cb-enable, .cb-disable, .cb-enable span, .cb-disable span { background: url 
(switch.gif) repeat-x; display: block;float: left;} 
.cb-enable span, .cb-disable span { line-height: 30px; display: block; background- 
repeat: no-repeat; font-weight: bold; } 
.cb-enable span { background-position: left -90px; padding: 0 10px; } 
.cb-disable span { background-position: right -180px;padding: 0 10px; } 
.cb-disable.selected { background-position: 0 -30px; } 
.cb-disable.selected span { background-position: right -210px; color: #fff; } 
.cb-enable.selected { background-position: 0 -60px; } 
.cb-enable.selected span { background-position: left -150px; color: #fff; } 
.switch label { cursor: pointer; } 

</style>

來源

2012-02-22 Larry Poulin

向我們展示html，甚至更好的現場版本，並告訴我們出了什麼問題.. – 2012-02-22 11:40:31

repeat-x ..但您可能需要問一些具體問題。 – 2012-02-22 12:09:46

感謝您的復出。以下是常用的代碼：此鏈接中的[link]（http://www.frysa.us/experiment.htm）爲代碼行：.cb-enable，.cb-disable，.cb-enable span，.cb -disable span {background：url（switch.gif）repeat-x;顯示：塊;浮動：左;} 這裏是我調整的一個：[鏈接]（http://www.frysa.us/MyAdjustedExperiment.htm），這裏是調整後的CSS： \t .cb-enable，.cb -disable，.cb-enable span，.cb-disable span {background：url（switch.gif）repeat-x;顯示：塊;位置：相對;左：120px;} 這裏是圖像：[鏈接]（http://www.frysa.us/switch.gif） – 2012-02-22 12:18:03

如果你只是想通過120個像素，將其移動到右邊，給你的元素（現在它的段落標記）一個ID並執行此操作：

#switchingButton{ 
    margin-left: 120px; 
}

您可以使用padding-left：120px;以及如果你的設計需要填充而不是保證金。

來源

2012-02-22 12:49:36 SnakeBombs

謝謝。這很好。現在我可以在頁面上移動它。我一直在這個HTML，CSS和Javascript大約一年。但我似乎是一個「緩慢的學習者」。感謝幫助 – 2012-02-22 13:01:02

使用CSS移動元素

回答

相關問題