在行和列中使用CSS并排对齐H标记&；jQuery

我正在显示多个嵌套类别：状态>商店类型>商店列表。所有类别标题都在h2标签中。现在，它一行一行地显示状态，一行叠在另一行上。我很难将状态并排列在3列中，因为它们是由jQuery控制的h2标记，我无法更改。我可以将h2标记转换为div并浮动它们，但是嵌套的层次结构会中断

这就是它现在的样子：

我正在尝试更改css，使其看起来像这样

尝试了所有方法，但它破坏了jQuery

CSS

Jquery

<script type='text/javascript'>//<![CDATA[ 

$(document).ready(function() {
//Initialising Accordion
$(".accordion").tabs(".pane", {
    tabs: '> h2',
    effect: 'slide',
    initialIndex: null
});

//The click to hide function
$(".accordion > h2").click(function() {
    if ($(this).hasClass("current") && $(this).next().queue().length === 0) {
        $(this).next().slideUp();
        $(this).removeClass("current");
    } else if (!$(this).hasClass("current") && $(this).next().queue().length === 0) {
        $(this).next().slideDown();
        $(this).addClass("current");
    }
});
});
//]]>  

</script>

//

HTML

纽约
第97街市场

哥伦布大道808号

纽约，NY 10025
测试
测试
新泽西州
内容

如果我正确理解您的意思，您可以通过在

.accordian h2

css中添加

display:inline

，使红色的

h2

选项卡并排排列

详情见下文

.oestlstore {
    float:left;display: inline-block;width:20%;padding:15px;
}
.split{
    margin:25px;
}
/* root element for accordion. decorated with rounded borders and gradient background image */
.accordion {
    background:#000;
    width: 99%;
    padding:12px;
    -background:#666;
}

/* accordion header */
.accordion h2 {
    background:#A91414;
    padding:9px 15px;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
    color: #fff;
    margin:15px;
    text-align:center;
    text-transform:uppercase;
    display:inline;
}


/* accordion header */
.accordion2 h2 {
    background:#000;
}


/* currently active header */
.accordion h2.current {
    cursor:default;
    background-color:#B40404;
}
/* currently active header */
.accordion2 h2.current {
    cursor:default;
    background-color:#000;
}

/* accordion pane */
.accordion .pane {
    display:none;
    padding:15px;
    color:#fff;
    font-size:16px;
}

/* a title inside pane */
.accordion .pane h3 {
    font-weight:normal;
    margin:0 0 -5px 0;
    font-size:16px;
    color:#999;
}

和一个分割图层以停止的div

<div class="accordion">
    <h2>New York</h2>
    <div class="pane">
        content
    </div>
    <h2>New Jersey</h2>
    <div class="pane">
        content
    </div>
    <h2>California</h2>
    <div class="pane">
        content
    </div>

    <div class="split"></div><!-- this is what you can use to split the levels -->

    <h2>New York</h2>
    <div class="pane">
        content
    </div>
    <h2>New Jersey</h2>
    <div class="pane">
        content
    </div>
    <h2>California</h2>
    <div class="pane">
        content
    </div>   
</div>

纽约
内容
新泽西州
内容
加利福尼亚
内容
纽约
内容
新泽西州
内容
加利福尼亚
内容

---

这就是它在

上的工作原理，但当我添加更多的状态时，它们彼此浮动：这很有帮助！但这就是我得到的：是否有任何方法来控制宽度，使列的宽度与此相同？为.

手风琴h2

设置

宽度

，而不是依靠

填充

来为单词的任一侧指定宽度当我设置一个宽度时，由于某种原因，它不会继承它，我认为唯一的方法是用div替换h2标记，但是它会破坏jquery，因为jquery使用h2标记进行嵌套。

.oestlstore {
    float:left;display: inline-block;width:20%;padding:15px;
}
.split{
    margin:25px;
}
/* root element for accordion. decorated with rounded borders and gradient background image */
.accordion {
    background:#000;
    width: 99%;
    padding:12px;
    -background:#666;
}

/* accordion header */
.accordion h2 {
    background:#A91414;
    padding:9px 15px;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
    color: #fff;
    margin:15px;
    text-align:center;
    text-transform:uppercase;
    display:inline;
}


/* accordion header */
.accordion2 h2 {
    background:#000;
}


/* currently active header */
.accordion h2.current {
    cursor:default;
    background-color:#B40404;
}
/* currently active header */
.accordion2 h2.current {
    cursor:default;
    background-color:#000;
}

/* accordion pane */
.accordion .pane {
    display:none;
    padding:15px;
    color:#fff;
    font-size:16px;
}

/* a title inside pane */
.accordion .pane h3 {
    font-weight:normal;
    margin:0 0 -5px 0;
    font-size:16px;
    color:#999;
}

<div class="accordion">
    <h2>New York</h2>
    <div class="pane">
        content
    </div>
    <h2>New Jersey</h2>
    <div class="pane">
        content
    </div>
    <h2>California</h2>
    <div class="pane">
        content
    </div>

    <div class="split"></div><!-- this is what you can use to split the levels -->

    <h2>New York</h2>
    <div class="pane">
        content
    </div>
    <h2>New Jersey</h2>
    <div class="pane">
        content
    </div>
    <h2>California</h2>
    <div class="pane">
        content
    </div>   
</div>