CSS：如何使水平（UL）列表保持每个项目在统一的宽度？ [英] CSS: How do I make a horizontal (UL) list keeping each item at a uniform width?

问题描述

也就是说，没有为每个单独的项目定义特定的宽度量。

另外，如何在所有列表中跨越所有列表100％的容器，

解决方案

如果我理解正确：

您想要一个列表。

您希望每个列表项的宽度相同。

您还需要一种在容器中均匀分布列表项的方法，
这似乎与3不兼容，因为那样它们将不会按内容而是按容器大小均匀分布。

所以我假设你想要两种不同的解决方案。

我想你可以做

 code>< style> 
 ul，li {float：left; margin; padding：0; display：block;} 
 li {clear：left; width：100％; margin：1px 0; background：＃03a;} 
< / style> 
< ul> 
< li>项目1< / li> 
< li>第2项较长< / li> 
< li>项目3< / li> 
< / ul> 
  

在某些浏览器中可用。我似乎记得它不工作在IE，并必须使其工作使用css表达式。

这个想法是ul和li的浮动，收缩他们内容宽度。
清除li，并将其设置为其容器宽度的100％，即缩小到其大小的相同容器。

-

您的其他选项在CSS中是不可能的，除非你知道列表项的数量。
虽然如果你不知道列表项的数量，这意味着在服务器端或客户端有脚本，你可以找出项目的数量。 ：）

我已经解决了这个问题，通过给ul一个类中的孩子数，并使用大量的CSS规则，希望一个棍子。

例如

 < style& 
 ul.lis1 li {width：100％} 
 ul.lis2 li {width：50％} 
 ul.lis3 li {width：33.3％} 
 ul.lis4 li {width：25％} 
 / * ...你可以永远在这里，虽然会有一个点，他们变得太薄，你的UI中断，* / 
< / style> 
< ul class =lis4> <！ -  lis4由PHP或Ruby或任何 - > 
< li> item 1< / li> 
< li> item 2< / li> 
< li> item 3< / li> 
< li> item 4< / li> 
< / ul> 
  

That is, without defining a specific 'width' amount for each individual item. As in, the widest element (by its content) sets the width for each of the other elements.

Additionally, how do I span said list 100% across its container, also keeping each item the same width?

解决方案

If I understand correctly:

1. You want a list.
2. You want each list item to be the same width.

3. You want that width to be the width of the widest list item's content

4. You also want a way to evenly space list items across a container, this seems incompatible with 3, because then they won't be evenly spaced by content but by container size.

So I'm assuming you want two different solutions.

I think you can do

<style>
  ul, li{float:left;margin;padding:0;display:block;}
  li {clear:left;width:100%;margin:1px 0;background:#03a;}
</style>
<ul>
  <li>Item 1</li>
  <li>Item 2 which is longer</li>
  <li>Item 3</li>
</ul>

works in some browsers. I seem to remember it not working in IE, and having to make it work using css expressions.

The idea is that the ul and li's are floated to shrink them to their content width. The li's are cleared and set to 100% of their container width, the same container that is shrunk to their size.

--

Your other option is impossible in CSS unless you know the number of list items. Though if you don't know the number of list items it means there is scripting going on either server side or client side, and you can find out the number of items. :)

I've solved this in the past by giving the ul a class with the number of children in it, and using lots of CSS rules and hoping one sticks.

eg

<style>
  ul.lis1 li {width:100%}
  ul.lis2 li {width:50%}
  ul.lis3 li {width:33.3%}
  ul.lis4 li {width:25%}
  /* ... you can keep going forever here, though there'll be a point at which they become too thin and your UI breaks anyway, */
</style>
<ul class="lis4"> <!-- lis4 is generated by PHP or Ruby or whatever -->
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>

这篇关于CSS：如何使水平（UL）列表保持每个项目在统一的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！