Question

想要将一个PrimeUI组件ToggleButton与html中的图像并排放置，但无法更改PrimeUI组件ToggleButton的位置。已经设置了一个带有类.tile设置的自定义style.css和用于togglebutton的id #tbIcons和用于图像的id＃d6。图像位置根据期望而改变，但无论顶部和左侧px如何制作，togglebutton都保持不变。自定义style.css已经放在PrimeUI css之后。有人可以帮忙吗？

我的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="themes/home/theme.css">
<link rel="stylesheet" href="css/jquery-ui-1.11.4.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/primeui.css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.4.js"></script>
<script type="text/javascript" src="js/primeui.js"></script>
<script type="text/javascript" src="js/components.js"></script>
<title>MJTest</title>
</head>
<body>
<link type="text/css" rel="stylesheet" href="style.css">
<input class="tile" id="tbIcons" type="checkbox" />
<img src="dice-6.png" class="tile" id="d6">
</body>
</html>

我的CSS：

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

#tbIcons { top: 120px; left: 50px}
#d6 { top: 120px; left: 200px; }

.tile {
    position: absolute;
}

JS代码： $（function（）{ $（＆＃39;＃tbIcons＆＃39）。puitogglebutton（{ onLabel：＆＃39;我同意＆＃39;， offLabel：＆＃39;我不同意＆＃39;， onIcon：＆＃39; fa-check-square＆＃39;， offIcon：＆＃39; fa-square＆＃39; }）; }）;

PrimeUI组件在css中的位置变化

0 个答案: