ul列表中li元素之间的CSS间距

Question

我有以下ul列表。我想在所有视口-台式机/移动设备/表格中的每个li元素之间留出相等的空间。 我已经为li内的图标设置了右填充，但是在其他分辨率下（如移动设备），这确实会中断。 在所有分辨率下，如何在li元素之间赋予相等的理想间距？

我希望li元素的水平列表在每个屏幕（台式机/手机/平板电脑）上居中对齐并等距排列

<ul class="navbar-nav navbar-right">
<li class="dropdown">
<a href="javascript:void(0);">
<img src="1.svg" class="imgicon">
<span class="username">li 1</span>
</a>
</li>

<li class="dropdown" id="li2" >
<a href="javascript:WindowLocation('/123');">
<img src="2.svg" class="imgicon">
 <span class="hidden-xs">li 2</span>
</a>
</li>

<li class="dropdown" id="li3" >
<a href="javascript:WindowLocation('/123');">
<img src="3.svg" class="imgicon">
 <span class="hidden-xs">li 3</span>
</a>
</li>

<li class="dropdown" id="li4" >
<a href="javascript:WindowLocation('/123');">
<img src="4.svg" class="imgicon">
 <span class="hidden-xs">li 4</span>
</a>
</li>

</ul>

Answer 1

如@Laif所建议，您可以尝试flexbox。 Flex可以完全满足您的要求。

请注意以下代码。它在li中有4个ul，并且在所有li之间有空间。

在手机上看起来像

ul {
  display:flex;
  list-style:none;
  padding: 0px;
  justify-content: space-between;
}
li{
  border:1px solid grey;
  padding:5px 10px;
}

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

`

Answer 2

解决方案1。尝试使用视口元标记来告知使用哪种测量方法的任何设备上的浏览器。它在所有设备上都保持相同的长宽比。

解决方案2。如果解决方案1不适用于您，请尝试使用CSS媒体查询在移动设备和其他屏幕上进行正确的间距。

Answer 3

尝试： 在CSS中，您可以申请

*{
    margin: 0;
    padding: 0;
}
ul
{
    text-align: center;
}
ul li
{
    list-style: none;
    display: inline-block;
    padding: 20px;
}
@media(max-width:340px)
{
  ul li
  {
      padding: 15px;
  }
}

您将以所有分辨率将li放在屏幕中央