如何在html没有空格时平均分配li元素？ [英] How to distribute li elements equally when html don't have whitespaces?

问题描述

我阅读了这篇文章几乎完整的flexbox指南flexbox），我试图使用空格之间，我有这样的代码：

  ul {margin：0; padding：0; text-align：justify;} ul：after {content：; display：inline-block; width：100％;} ul li {list-style：none; display：inline-block;}  

 < ul> ; li> Foo< / li>< li> Bar< / li>< li> Baz< / li>< / ul>< ul>< li> Foo< / li>< li> / li>< li> Baz< / li>< / ul>  

$ b b

< li> 在第一个< ul> $ c>< li> 在< li> 标签的末尾没有空格， code> text-align：justify 当html是一行没有空格时？是否可能没有flexbox？

我试图添加 ul li：之后 。

解决方案

在这种情况下， text-align：justify 因为首先你需要允许列表项的宽度，然后 text-align 将工作。您可以在％中使用width，之后 text-align 可以对齐文本。

  ul {width：100％;高度：100％; padding：0; margin：0;} ul li {float：left; line-height：37px;高度：100％; list-style-type：none; margin：0; overflow：hidden; width：33.33％; background：red;} ul li span {background：blue; display：block; width：100％;}  

  ul>< li> Foo< / li>< li> Bar< / li>< li> Baz< / li>< / ul>< ul>< li>< span> Foo< / span ;< / li>< li>< span>< / span>< / li>< li>< / span>< / span>< / li>< / ul> c $ c> 
 

I read this article Almost complete guide to flexbox (without flexbox), and I've try to use "space-between", I have code like this:

ul {
  margin: 0;
  padding: 0;
  text-align: justify;
}
ul:after {
  content: "";
  display:inline-block;
  width:100%;
}
ul li {
  list-style: none;
  display: inline-block;
}

<ul><li>Foo</li><li>Bar</li><li>Baz</li></ul>
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>

<li>'s in first <ul> is not distributed correctly because <li> don't have whitespace at the end of <li> tags, is it possible to have distribution using text-align: justify when html is one line without whitespace? Is it possible without flexbox?

I've tried to add ul li:after but that didn't work.

解决方案

In this case text-align: justify is not appropriate because first of all you need to allow width for list item, then text-align will work. You can use width in % and after that text-align to align text.

ul {
  width:100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

ul li {
    float:left;
    line-height:37px;
    height:100%;
    list-style-type:none;
    margin:0;
    overflow:hidden;
    width: 33.33%;
  background: red;

}
ul li span{
 background: blue;
 display: block;
width: 100%;
}

<ul><li>Foo</li><li>Bar</li><li>Baz</li></ul>
<ul>
<li><span>Foo</span></li>
<li><span>Bar</span></li>
<li><span>Baz</span></li>
</ul>

这篇关于如何在html没有空格时平均分配li元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！