Question

我使用JQuery UI手风琴来表示我的数据。但我想删除手风琴的左右边距以使用整页进行数据表示。我用margin-left and margin-right进行了管理，但没有获得完美的利润。

我的代码在这里：

HTML：

<div id="acc_main" class="acc">
 <h3>Main Section</h3>

<div id="acc_camp" class="acc">
     <h3>Camp 1</h3>

    <div class="acc">
         <h3>Section 1</h3>

        <div>1st section</div>
         <h3>Section 2</h3>

        <div>2nd section</div>
         <h3>Section 3</h3>

        <div>List : 1</div>
    </div>
     <h3>Camp 2</h3>

    <div class="acc">
         <h3>Section 1</h3>

        <div>1st section</div>
         <h3>Section 2</h3>

        <div>2nd section</div>
         <h3>Section 3</h3>

        <div>List : 2</div>
    </div>
     <h3>Camp 3</h3>

    <div class="acc">
         <h3>Section 1</h3>

        <div>1st section</div>
         <h3>Section 2</h3>

        <div>2nd section</div>
         <h3>Section 3</h3>

        <div>List : 2</div>
    </div>
</div>

CSS：

h3 {
text-align: center;
}
.ui-accordion {
margin-left: 0px;
}
.ui-accordion-header {
height: 15px;
}
.ui-accordion .ui-accordion-header {
margin-left: -20px;
margin-right: -25px;
}
.ui-accordion .ui-accordion {
margin-left: -20px;
margin-right: -25px;
}
.ui-accordion .ui-accordion .ui-accordion {
margin-left: -20px;
margin-right: -25px;
}
.ui-accordion .ui-accordion .ui-accordion-header {
margin-left: -20px;
margin-right: -25px;
}
.ui-accordion-content {
margin-left: -20px;
margin-right: -25px;
}

JQuery的：

$(document).ready(function () {
var icons = {
    header: "ui-icon-circle-plus",
    activeHeader: "ui-icon-circle-minus"
};
$(".acc").accordion({
    active: false,
    collapsible: true,
    heightStyle: "content",
    icons: icons
});
});

JSFiddle页面：

Fiddle

Answer 1

这是你想要的：demo

body {margin:0}
.ui-accordion .ui-accordion-content {padding:0px }

Answer 2

是你的答案吗？ demo

#acc_main{margin:1px;}
#acc_camp{padding:2px;}

如何删除jquery ui手风琴中的左右边距？

2 个答案: