如何更改数字时钟位置，使其位于我网站的右上角？

Question

我正在使用weebly.com来编辑我的网站，我将名为embed code的对象拖到特定页面，在里面我添加了一个javascript代码。 因此，在我的主页面中，我有两个javascript代码，它们工作正常，但它们位于第二个页面的中间位置。

My Site

这是两者的代码：

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script language='JavaScript'>
$(function(){
 $("ul#ticker01").liScroll();
});
/*!
 * liScroll 1.0
 * Examples and documentation at:
 * http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html
 * 2007-2010 Gian Carlo Mingati
 * Version: 1.0.2.1 (22-APRIL-2011)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * Requires:
 * jQuery v1.2.x or later
 *
 */


jQuery.fn.liScroll = function(settings) {
  settings = jQuery.extend({
  travelocity: 0.10
  }, settings);  
  return this.each(function(){
    var $strip = jQuery(this);
    $strip.addClass("newsticker")
    var stripWidth = 1;
    $strip.find("li").each(function(i){
    stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
    });
    var $mask = $strip.wrap("<div class='mask'></div>");
    var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");        
    var containerWidth = $strip.parent().parent().width(); //a.k.a. 'mask' width  
    $strip.width(stripWidth);   
    var totalTravel = stripWidth+containerWidth;
    var defTiming = totalTravel/settings.travelocity; // thanks to Scott Waye  
    function scrollnews(spazio, tempo){
    $strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
    }
    scrollnews(totalTravel, defTiming);    
    $strip.hover(function(){
    jQuery(this).stop();
    },
    function(){
    var offset = jQuery(this).offset();
    var residualSpace = offset.left + stripWidth;
    var residualTime = residualSpace/settings.travelocity;
    scrollnews(residualSpace, residualTime);
    });   
  }); 
};
</script>

<style>
/* liScroll styles */

.tickercontainer { /* the outer div with the black border */
border: 1px solid #000;
background: #fff;
width: 500px;
height: 27px;
margin: auto 0;
padding: 0;
overflow: hidden;
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 10px;
top: 8px;
width: 500px;
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: 500px;
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;

}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding: 0;
background: #fff;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #ff0000;
font: bold 10px Verdana;
margin: 0 50px 0 0;
}
ul.newsticker span {
margin: 0 10px 0 0;
}
</style>

<ul id="ticker01">
 <li><span>10/10/2007</span><a href="#">The first thing ...</a></li>
 <li><span>10/10/2007</span><a href="#">End up doing is ...</a></li>
 <li><span>10/10/2007</span><a href="#">The code that you ...</a></li>
 <!-- eccetera -->
</ul>


<div id="clock" class="dark">
    <div class="display">
        <div class="weekdays"></div>
        <div class="ampm"></div>
        <div class="alarm"></div>
        <div class="digits"></div>
    </div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
<script src="http://newsxpressmedia.com/files/theme/digiclock.js"></script>
<link rel="stylesheet" type="text/css" href="http://newsxpressmedia.com/files/theme/digiclock.css">

数字时钟的代码位于底部：

<div id="clock" class="dark">
        <div class="display">
            <div class="weekdays"></div>
            <div class="ampm"></div>
            <div class="alarm"></div>
            <div class="digits"></div>
        </div>
    </div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
    <script src="http://newsxpressmedia.com/files/theme/digiclock.js"></script>
    <link rel="stylesheet" type="text/css" href="http://newsxpressmedia.com/files/theme/digiclock.css">

我的问题我怎么能改变它的立场？它是在javascript代码中还是应该是我正在使用的weebly.com编辑器？

Answer 1

只需添加：

style="position:absolute;top:0px;right:0px;"

Div与id="clock"

那意味着，

更改行：<div id="clock" class="dark">

：<div id="clock" class="dark" style="position:absolute;top:0px;right:0px;">

或在css文件中添加：

#clock
{
position:absolute;
top:0px;
right:0px;
}

这是输出：

希望它能帮助你!!干杯! ：）..