javascript中的动态手风琴
我一直在研究动态手风琴。我已经实现并测试了，一切正常。并决定将代码移到我的项目中，但它略有不同。当您查看手风琴头箭头（在左侧）时，在JSFIDLE中它居中，但在产品中它不居中。我想知道如何解决这个问题 下面是JSFIDLE原型 在产品安装jquery中： 产品代码：javascript中的动态手风琴,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我一直在研究动态手风琴。我已经实现并测试了，一切正常。并决定将代码移到我的项目中，但它略有不同。当您查看手风琴头箭头（在左侧）时，在JSFIDLE中它居中，但在产品中它不居中。我想知道如何解决这个问题 下面是JSFIDLE原型 在产品安装jquery中： 产品代码： <html lang="en" xmlns="http://www.w3.org/1999/xhtml" style="height:98%"> <head> <meta charset="
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" style="height:98%">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.table-holder {
width:100%;
}
.table-holder table {
margin:0 auto;
}
#accordion li > text{
display:inline-block;
text-align : center;
}
#accordion .formationName {
width:200px;
text-align : center;
}
#accordion .bitSize {
width:200px;
text-align : center;
}
#accordion .bitType {
width:100px;
text-align : center;
}
ul
{
list-style-type: none;
}
#accordion li{
display:inline-block;
margin:0 0 0 20px;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
border-spacing: 20px;
}
th, td {
padding: 15px;
text-align: left;
font-size:12px;
}
.ui-accordion ul {
margin: 0;
}
#refresh, #build{
float:right
}
#build
{
margin-left:5px;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon{
position: absolute !important;
top: 50% !important;
}
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
</head>
<body>
<div class="accordion-expand-holder">
<button type="button" id="build">Build</button>
<button type="button" id="refresh">Refresh</button>
<button type="button" class="open">Expand all</button>
<button type="button" class="close">Collapse all</button>
<div id="accordion">
</div>
</div>
.桌架{
宽度：100%；
}
.桌座{
保证金：0自动；
}
#手风琴李>文本{
显示：内联块；
文本对齐：居中；
}
#手风琴.格式名称{
宽度：200px；
文本对齐：居中；
}
#手风琴.比特大小{
宽度：200px；
文本对齐：居中；
}
#手风琴{
宽度：100px；
文本对齐：居中；
}
保险商实验室
{
列表样式类型：无；
}
#手风琴李{
显示：内联块；
利润率：0.20px；
}
表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
边界间距：20px；
}
th，td{
填充：15px；
文本对齐：左对齐；
字体大小：12px；
}
.ui手风琴ul{
保证金：0；
}
#刷新，#构建{
浮球：对
}
#建造
{
左边距：5px；
}
.ui accordion.ui accordion标题.ui accordion标题图标{
位置：绝对！重要；
前50%！重要；
}
建筑
刷新
全部展开
全部崩溃
可能正在覆盖产品中的top和position属性。在CSS中尝试以下内容：
.ui accordion.ui accordion头。ui accordion头图标{
位置：绝对！重要；
前50%！重要；
}.ui-accordion .ui-accordion-header .ui-accordion-header-icon{
position: absolute !Important;
top: 50% !Important;
}
我相信您希望将标题图标（箭头）向右移动，使其在选项卡的该部分居中显示。如果这是您想要做的，那么在Html文件中进行以下CSS编辑可能会有所帮助。它并不完美，但确实在视觉上显示了箭头“属于”选项卡文本的外观
<style type="text/css">
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
left: 20%;
}
</style>
.ui accordion.ui accordion标题.ui accordion标题图标{
左：20%；
}