让UL仅水平扩展

我需要动态地将LI元素添加到长度为“n”的UL元素。在HTML现在我已经是...让UL仅水平扩展

<div class="center"> 
    <ul id="tabList" class="parent"> 
     <!-- I am adding LI using jQuery here. --> 
     <br class="clearfix" /> 
    </ul> 
</div>

这里采用的CSS是...

.center 
{ 
    top: 0; 
    margin: 0 15%; 
    width: 70%; 
    overflow: hidden; 
} 

.center ul.parent 
{ 
    left: 0; 
    height: 100%; 
    position: relative; 
} 

.center ul.parent li 
{ 
    float: left; 
    margin: 0 5px; 
} 

.center ul.parent li .tab 
{ 
    position: relative; 
    padding: 5px 10px; 
    background: transparent; 
    font-size: 16px; 
    font-weight: bold; 
    line-height: 49px;  
    border: 1px solid rgba(0, 0, 0, 0.1); 
    color: #A9D0F5; 
    background: rgba(0, 0, 0, 0.1); 
    border-radius: 3px; 
}

我必须根据其子集.parent宽度，为了不让宽度UL在这里垂直扩展。有没有我可以用来修复宽度设置的方法？我不喜欢根据孩子积累的宽度设置宽度。

来源

2011-11-23 Neutralizer

你可以把图像看到的是你想要的吗？ – Galled

如果您将在docs.google.com上打开新电子表格，则会在底部注意到表格选项卡。我想创造类似的东西。 – Neutralizer

当jQuery添加li的宽度超过屏幕的70％时，您希望发生什么？ – bookcasey

你想要类似this？

为了避免新的LI下降，我放了一个大智慧。

.center ul.parent 
{ 
    width: 1000%; 
}

但我认为你的问题在这里：

.center 
{ 
    width: 70%; 
    overflow: hidden; 
}

会到来的时间，其中的.center将不允许展示新LI秒。

我推荐给你，因为你将添加LI标签使用jQuery，检测.center ul.parent的第一宽度和每个新LI除了编程方式增加它。

从你告诉我的意见就是我再拍演示，看看它是否帮助你 - >http://jsfiddle.net/Galled/KQqYm/4/

来源

2011-11-23 19:07:39 Galled

我现在正在做同样的事情。但我想如果有一种CSS方式来做到这一点，那将是美好的。 – Neutralizer

有没有另外一种方法可以做到这一点，假设中心必须有70％的宽度，但溢出：隐藏将被删除？我的意思是任何其他方式由jQuery或CSS？ – Neutralizer

@UmairAshraf为什么你会删除'overflow：hidden'你需要看到所有的标签？也许你可以使用'overflow：auto' – Galled

让UL仅水平扩展

回答

相关问题