Question

我正在尝试在我的网页上使用ConnorAtherton loaders。特别是pac man one但是有一些问题让它看起来正确。

HTML：

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script src="js/libs/jquery/jquery.js" type="text/javascript"></script>

        <link href="js/libs/jqueryui/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script src="js/libs/jqueryui/jquery-ui.js" type="text/javascript"></script>

        <script src="js/libs/jquery.tablesorter/js/jquery.tablesorter.js" type="text/javascript"></script>
        <script src="js/libs/jquery.tablesorter/js/jquery.tablesorter.widgets.js" type="text/javascript"></script>

        <link href="bower_components/loaders.css/loaders.css" rel="stylesheet" type="text/css"/>
        <script src="bower_components/loaders.css/loaders.css.js" type="text/javascript"></script>

        <link href="js/libs/jquery.tablesorter/css/theme.blackice.min.css" rel="stylesheet" type="text/css"/>
        <link href="css/main.css" rel="stylesheet" type="text/css"/>
        <script src="js/main.js" type="text/javascript"></script>
    </head>
    <body>
        <header class="header">
            <input type="file" id="logSelector" name="log" title="Select a log file" onchange="logSelected();"/>
            <input type=button id="remoteLogSelector" value="remoteLog" style="display: none" title="Select a remote log file" onclick="sftpLogin();"/>
        </header>
        <div id="myModal" class="modal">
            <div class="modal-content">
                <p>Processing File.</p>
                <div class="loader-inner pacman">
                    <div class="pacmanDot"></div>
                    <div class="pacmanDot"></div>
                    <div class="pacmanDot"></div>
                    <div class="pacmanDot"></div>
                    <div class="pacmanDot"></div>
                </div>
                <input type = "button" name="cancel" value = "cancel" onclick = "cancelRead()" />
            </div>
        </div>

    </body>
</html>

CSS

.pacman {
    position: relative;
    background-color: black;
}

一些如何在它的包含div之外（从左到左）

所以我添加了一些填充

.pacman {
    position: relative;
    background-color: black;
    padding-left: 30px;
}

然后，控制点的孩子divs，不与pacman对齐它很难看到，但现在白点到了左边（你可以看到白色盒子外面的一个尖端），虽然pacman是我想要的对齐。

我尝试为空div添加另一个类pacmanDot，并在css中为它们添加填充。但这并没有影响到这个位置

如何将pacman和dot移动到右边？

Answer 1

对不起它非常简单，应该早点想到它！我将pac man div封装在另一个内部而不是填充

HTML

/*div containing the pacman animation, had to do this to make it look right*/
.loadersPacman{
    padding-left: 30px;
}

CSS

NS_ENUM

正确定位模态的加载器动画

1 个答案: