水平列表项目 - 以均匀间距适合100％ [英] Horizontal list items - fit to 100% with even spacing

问题描述

我有一个简单的列表，我试图让列表项横向均匀间隔，但仍然填充容器宽度的100％，而不管容器的宽度如何。

我不希望每个列表项具有相同的宽度，而是每个列表项之间的间距要均匀：

jsfiddle：< a href =http://jsfiddle.net/b6muX/1/> http://jsfiddle.net/b6muX/1/

另外列表项的数量可能是动态的，与我的示例中的数字不一样。

这可以在没有js的情况下完成吗？

以下是我的标记和css：

 < ul> 
< li>这是菜单项1< / li> 
< li> 2号< / li> 
< li>商品编号3< / li> 
< li>菜单4< / li> 
< / ul> 
  

和以下css：

  ul {
 width：100％; 
背景：#cacaca; 
保证金：0; 
 padding：0; 
} 
 li {
 list-style-type：none; 
 display：inline-block; 
填充权：10％; 
 width：auto; 
保证金率：0.5％; 
背景：#fafafa; 
 padding-left：0; 
 margin-left：0; 
} 
 li：last-child {
 margin-right：0; 
 padding-right：0; 
} 
  

解决方案

解决您的问题:)

ul {display：flex; align-items：stretch; / *默认* / justify-content：空格之间;宽度：100％;背景：#cacaca;保证金：0; padding：0;} li {display：block; flex：0 1 auto; / *默认* / list-style-type：none;背景：#fafafa;}

< ul> < li>这是菜单项1< / li> < li> 2号< / li> < li>商品编号3< / li> < li> Menu 4< / li>< / ul>

p>另见： http://jsfiddle.net/teddyrised/b6muX/3/

如果您允许我放纵一下自己的解释：

1. display：flex 在父级告诉父级采用CSS flexbox模型


2. align-items：stretch 告诉家长它的孩子应该伸展到行的全部高度。这是该属性的默认值。

关于孩子：

1. flex：0 1 auto 对孩子说：
   
   
   
   
   • flex-grow：0 ：不增长，否则他们会填满父母
   
   
   • flex-shrink：1 ：必要时收缩以防止溢出（您可以通过将其设置为0来关闭此功能。
   
   
   • flex-basis：auto ：根据元素的内容自动计算子元素的宽度如果你想要固定的等宽子元素，只需将它设置为 100 ％。
   
   

您可以调整填充为
$ b










$ < h2>旧的CSS方法： text-align：justify



它比较麻烦要求您重置无序列表元素中的字体大小以消除子元素之间的间距。它还要求你呈现一个伪元素来确保内容溢出第一行以便进行文本对齐（记住对齐文本的默认行为是不是100％的行将被证明是不合理的）。

ul {font-size：0; / *消除内联块元素之间的间距* / text-align：justify;宽度：100％;背景：#cacaca; list-style：none;保证金：0; padding：0;} ul：after {content：'abc';显示：inline-block;宽度：100％; height：0;} li {display：inline-block;背景：#fafafa; font-size：1rem; / *重用根元素的字体大小* /} p {font-size：1rem;}

 < UL> < li>这是菜单项1< / li> < li> 2号< / li> < li>商品编号3< / li> < li> Menu 4< / li>< / ul>  

p>另见： http://jsfiddle.net/teddyrised/b6muX/5/

I have a simple list and i am trying to get the list items to be evenly spaced horizontally, but still fill 100% of the width of the container regardless of the width of the container.

I do not want each list item to be of equal width, but instead the spacing between each list item to be even:

jsfiddle: http://jsfiddle.net/b6muX/1/

Also the number of list items might be dynamic and not the same as the number in my example.

Can this be done without js?

Here is my markup and css:

<ul>
    <li>This is menu item 1</li>
    <li>Number 2</li>
    <li>Item Number 3</li>
    <li>Menu 4</li>
</ul>

and the following css:

ul {
    width: 100%;
    background: #cacaca;
    margin: 0;
    padding: 0;
}
li {
    list-style-type: none;
    display: inline-block;
    padding-right: 10%;
    width: auto;
    margin-right: 0.5%;
    background: #fafafa;
    padding-left: 0;
    margin-left: 0;
}
li:last-child {
    margin-right: 0;
    padding-right: 0;
}

解决方案

The new CSS flexbox specification would be the solution to your problem :)

ul {
    display: flex;
    align-items: stretch; /* Default */
    justify-content: space-between;
    width: 100%;
    background: #cacaca;
    margin: 0;
    padding: 0;
}
li {
    display: block;
    flex: 0 1 auto; /* Default */
    list-style-type: none;
    background: #fafafa;
}

<ul>
    <li>This is menu item 1</li>
    <li>Number 2</li>
    <li>Item Number 3</li>
    <li>Menu 4</li>
</ul>

See also: http://jsfiddle.net/teddyrised/b6muX/3/

If you would allow me to indulge myself in a bit of explanation:

1. display: flex on the parent tells the parent to adopt the CSS flexbox model
2. align-items: stretch tells the parent that its children should stretch to the full height of the row. This is the default value of the property.
3. justify-content: space-between is the magic here — it instructs the parent to distribute remaining space left after laying out the children between them.

On the children:

1. flex: 0 1 auto on the children tells them that:
   • flex-grow: 0: Do no grow, otherwise they will fill up the parent
   • flex-shrink: 1: Shrink when necessary, to prevent overflowing (you can turn this off by setting to 0.
   • flex-basis: auto: Widths of children element are calculated automatically based on their content. If you want fixed, equal width children element, simply set it to 100%.

You can adjust the padding to the <li> element as of when you see please.

---

Old CSS method: text-align: justify

The old method, while working perfectly, is a little more cumbersome as it requires you to reset the font-size in the unordered list element to eliminate spacing between child elements. It also requires you to render an pseudo-element to ensure that the content overflows the first row for text justification to kick in (remember that the default behavior of justified text is that a row that is not 100% will not be justified).

ul {
    font-size: 0; /* Eliminate spacing between inline block elements */
    text-align: justify;
    width: 100%;
    background: #cacaca;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul:after {
    content: 'abc';
    display: inline-block;
    width: 100%;
    height: 0;
}
li {
    display: inline-block;
    background: #fafafa;
    font-size: 1rem; /* Reuse root element's font size */
}
p {
    font-size: 1rem;
}

<ul>
    <li>This is menu item 1</li>
    <li>Number 2</li>
    <li>Item Number 3</li>
    <li>Menu 4</li>
</ul>

See also: http://jsfiddle.net/teddyrised/b6muX/5/

这篇关于水平列表项目 - 以均匀间距适合100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！