CSS 水平行中等宽元素的任意数量
我想创建一个像这样的进度跟踪器： https://hmv.com/hmvweb/checkoutRegister.do< /a> 但我需要它流畅，以便周围的 DIV 可以改变其宽度。我可以给每个列表元素一个百分比宽度，但此外还会有具有不同列表元素数量的进度跟踪器。列表元素应该填满整个宽度，并且它们应该具有相等的宽度。
这不是一个容易的挑战，对吧？
有谁知道如何创建解决方案？我尝试了 display: table 属性，它们并排放置，但不像想要的那样（元素宽度错误）。
I want to create a progress tracker like this one: https://hmv.com/hmvweb/checkoutRegister.do
but I need it fluidly so the surrounding DIV can change its width. I could give each list element a percentage width, but furthermore there will be progress trackers with different count of list elements. The list elements should fill the complete width and they should have a equal width.
Not a easy challenge, right?
Does anyone have a idea how to create a solution? I tried the display: table properties, they are positioned side by side but not like a wanted it (wrong width of the elements).
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
为什么不直接将元素包装在没有列表样式、display:block 且宽度为 100% 的
中。然后让每个进度项都在一系列中，这些< ;li>相应的样式。Why not just wrap the elements up in an
<ul>which has no list-style, display:block and a width of 100%. Then have each progress item within a series of<li>which have a float:left, no list style and an equal percentage width? This would require that you have a css style for the<li>based on the number of items but if you are using a CMS or can write some JS then you could attach the correct<li>style accordingly.如果您对基于
display: table的解决方案感到满意，除了事实上，元素的宽度不相等，那么最简单的方法就是解决这个问题。您可以通过应用
table-layout：fixed任何具有display: table的内容。参见： http://jsfiddle.net/JBfE7/
If you're happy with a
display: table-based solution, other than the fact that the width of the elements aren't equal, then the simplest thing to do is fix that problem.You can do that by applying
table-layout: fixedto whatever hasdisplay: table.See: http://jsfiddle.net/JBfE7/