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

Question

我有一个如下所示的 ul 列表。我想在所有视口中使每个 li 元素之间 space 相等 - 桌面/移动/table。我已经为 li 中的图标提供了 padding-right，但在其他分辨率（如移动设备）中看到时确实会中断。如何在所有分辨率下给 li 元素之间提供相等的理想间距？

我希望 li 元素的水平列表在任何屏幕上都居中对齐 spaced (桌面/ phone/ tablet)

<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

解决方案 1. 尝试使用视口元标记告诉浏览器在任何设备上使用相同的测量值。它在所有设备上保持相同的纵横比。

解决方案 2。如果解决方案 1 不适合您，请尝试 css 媒体查询以在移动设备和其他屏幕上设置正确的间距。

Answer 2

正如@Laif 建议的那样，您可以尝试使用 flexbox。 Flex 可以完全满足您的要求。

注意下面的代码。它在 ul 内有 4 li 并且我们在所有 li.

之间有 space

在手机上看起来像

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 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 都会显示在屏幕中央

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

CSS spacing between li elements inside a ul list

html

css

responsive-design

responsive