Html li元素的充分证明

我们有一个自适应布局，其中一些列表元素水平显示：

| Li1 | Li2 | Li 3 | Li4 |

很明显，我可以设置

ul {width:100%}
ul li {width:25%}

使li的大小随着浏览器大小的改变而改变。但是，我们希望最左侧的li的左边缘与左边缘对齐，而最右侧的li右边缘与右边缘对齐，即使在浏览器展开时也是如此

Li1    Li2    Li3     Li4
|                       |

Li1      Li2      Li3       Li4
|                             |

Li1  Li2  Li3   Li4
|                 |

纯css有没有办法做到这一点？

这就是我到目前为止所得到的。。这可能是你的一个开始

HTML

<div id="container">
<ul>
    <li class="fisrt">1</li>
</ul>
<ul class="center">
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ul>
    <li class="last">5</li>
</ul>
</div>​

使用（或）。将该答案转换为列表会导致：

标记：

<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>

---

这是一个IE7+解决方案。对于IE7，您需要在列表项附近添加一个额外的元素。

您好，您在li中定义的文本对齐对齐对齐方式如下

css

ul {width:100%}


ul li {width:25%;
    list-style:none;
    display:inline-block;
    text-align:justify;
    margin:2px;
    background:yellow;
    word-wrap: break-word;

}

<ul>
    <li>Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere </li>
    <li>Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere </li>  <li>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</li>    
</ul>

HTML

ul {width:100%}


ul li {width:25%;
    list-style:none;
    display:inline-block;
    text-align:justify;
    margin:2px;
    background:yellow;
    word-wrap: break-word;

}

<ul>
    <li>Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere </li>
    <li>Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere </li>  <li>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</li>    
</ul>

演示文本hrere演示文本hrere演示文本hrere演示文本hrere演示文本hrere演示文本hrere演示文本hrere演示文本hrere演示文本hrere演示文本hrere
演示文本hrere演示文本hrere演示文本hrere演示文本hrere演示文本hrere演示文本hrere演示文本hrere演示文本hrere

---

​在这里进行现场演示

IMHO，最好的方法是使用CSS3 FlexBox：

.menu {
    display: flex;
    justify-content: space-around;
}

---

当然，这正是您的示例CSS所做的吗？请澄清一下，您是在谈论文本对齐吗？i、 e.您希望最左侧的li元素具有左文本对齐，最右侧的li元素具有右文本对齐，并且可能。。。中间的要对齐中心文本吗？不太。。。在css示例中，li中的文本要么左对齐，要么右对齐，要么居中对齐，因此不能保证文本会正确对齐，只能保证li元素的框对齐到边缘。@Dan--我想你刚刚解决了我的问题：）--第一个孩子，最后一个孩子应该使用此解决方案，如果li中的文本宽度不相同，则实际文本之间的边距会非常不均匀。非常酷！然而，我发现

之间的空格更准确地回答了这个问题。