使用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移动元素

回答

相关问题