Question

下面的分页代码很好地显示。但是，它总是左对齐浏览器的边缘。

如何向右移动200像素？

HTML：

echo " <div class='pages'><a href='http://www.domain.com/index.php?currentpage=1' class='links'><<</a></div> "; 

echo " <div class='pages'><a href='http://www.domain.com/index.php?currentpage=$prevpage' class='links'><</a></div> ";   

echo " <div class='pages'>[<b>$x</b>] </div>";  

echo " <div class='pages'><a href='http://www.domain.com/index.php?currentpage=$x' class='links'>$x</a></div> ";  

echo " <div class='pages'><a href='http://www.domain.com/index.php?currentpage=$nextpage' class='links'>></a></div> ";

CSS：

    .pages
        {
        color: #000000;
        overflow: hidden;
        display: block;
        float: left;
        margin: 4px;
        margin-top: 1600px;
        margin-bottom:0px;
        margin-left: 10px;
        padding-bottom: 0px;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 24px;
        }   


 a.links:link {
    color: #004284; text-decoration: none;
    text-align:center;
    margin-left:8px;
    margin-bottom:0px;
    padding:2px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 24px;
    }

 a.links:visited {
    color: #004284; text-decoration: none;
    text-align:center;
    margin-left:8px;
    margin-bottom:0px;
    padding:2px;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 24px;
    }

 a.links:active {
    color: #004284; text-decoration: none; 
    text-align:center;
    margin-left:8px;
    margin-bottom:0px;
    padding:2px;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 24px;
    }

 a.links:hover {
    color: #FFFFFF; text-decoration: none; 
    background-color: #004284;
    text-align:center;
    margin-left:8px;
    margin-bottom:0px;
    padding:2px;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 24px;
    }

Answer 1

或者您可以将其简单地包装到外部<div>中，然后您可以将它们全部控制在一起：

<div id="wrap">
<div class='pages'><a href='http://www.domain.com/index.php?currentpage=1' class='links'><<</a></div> 
<div class='pages'><a href='http://www.domain.com/index.php?currentpage=1' class='links'><<</a></div> 
....
</div>

然后就是css it：

#wrap {
margin-left: 200px;
}

Answer 2

你需要给它一些margin-left，如下所示：

.pages {
    /*your code here...*/
    margin-left: 200px;
}

Answer 3

一堆方法。最简单的（imo）是创建一个新类并将其应用于您的第一个分页div：

.pagesfirst{margin-left:210px}

然后将该课程添加到您的第一个div echo：

echo "&#60;div class='pages pagesfirst'&#62;&#60;a href='http://www.domain.com/index.php?currentpage=1' class='links'&#62;<<&#60;/a&#62;&#60;/div&#62; ";

CSS使分页链接200个像素的浏览器边距

3 个答案: