在标签</ul>中水平对齐两个<ul>

Question

请查看 FIDDLE 。我无法在jqueryUI选项卡中获得两个水平对齐的无序列表。我在float:left上尝试了display:inline <ul>，但没效果。谁能给我一些想法？

HTML：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
    </ul>
    <div id="tabs-1">
         <p>
           <div id="pricing-table" class="pricing-table">
                            <ul>
                                <li class="heading">Bronze</li>
                                <li class="price">£20</li>
                                <li>Starter package</li>
                                <li>15 Projects</li><li>40%</li>
                                <li class="action">Buy Now</li>
                            </ul>

                            <ul class="feature">
                                <li class="heading">Silver</li>
                                <li class="price">£60</li>
                                <li>Intermediate package</li>
                                <li>20 Projects</li><li>30%</li>
                                <li class="action">Buy Now</li>
                            </ul>                                
                        </div> 

            <div style="clear:both"></div>                                
        </p>
    </div>    
</div>

CSS代码

body {
   background-color: #eef;     
}
#tabs {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}    

.pricing-table {display:table;}
.pricing-table ul{ 
    border-width: 1px; 
    border-style: solid; 
    border-color: #cccccc; 
    border-radius: 7px; 
    margin: 2px; 
    width: 50%;
    text-align: center; 
    list-style: none; 
    float:left;
    padding: 5px; 
    background-color: #FFFFFF;  
} 
.pricing-table ul li{ 
    padding: 4px; 
    background-color: #FFFFFF; 
    border-width: 0px; 
    border-style: dotted; 
    border-color: #CCCCCC; 
    border-radius: 4px; 
    border-bottom-width: 1px; 
    font-size: 13px; line-height:26px; } 
.pricing-table li:nth-child(odd){ 
    background-color: #FFFFFF; 
} 
.pricing-table ul .heading{ 
    color: #FFFFFF; 
    background-color: #404554; 
    font-size: 15px; height:80px; 
} 
.pricing-table ul .price{ 
    color: #636363; 
    background-color: #FFFFFF; 
    font-size: 17px; 
}           

Answer 1

或者：

Solution 1.

删除float:left并将display:table-cell添加到.pricing-table ul

Solution 2

从display:table移除.pricing-table，然后从width:50%;移除.pricing-table ul

Solution 3b (full width, preferred)

删除float:left并将display:table-cell添加到.pricing-table ul，将width:100%添加到.pricing-table

Answer 2

赞this？

我的解决方案是将.pricing-table { display: table; }更改为display: flex;

Answer 3

如果你想横向放置列表，我想这样可以回答你：

的CSS：

ul li {float:left;}