18910140161

Html

首页 >> 前端开发 >> Html

JavaScript-如何安排li和移除li空闲空间？-堆栈溢出

顺晟科技

2022-10-19 11:57:26

80

我要移除我的li之间的空闲空间并排列我的li 第一张图片是我的代码想要像第二张图片一样改变我的navbar可用空间 这就是我在代码中使用的样式

第一张图像 必须更改此代码才能像第二个pic一样删除可用空间

第二张图像 按照以下图片排列和删除navbar中的可用空间

谢谢

顺晟科技：

最好不要将标签直接放在另一个标签内。创建一个inside，并将子元素放在其中。如下面的示例:

<head>
<style>
.test{
        margin: 0;
        width: 20.65%;
        padding: 0;
        height: max-content;
        display: unset !important;
        vertical-align: top;
        white-space: nowrap;
    }
    .right{
    text-align: right !important;
    display: flex;
    flex-wrap: wrap;
    flex-flow: wrap;
    height: 500px!important;
}

</style>
</head>
   <ul class="test">
   <a class="text-bold" href="#">title</a>
   <ul class="list">
      <li class="w-100 text-right"><a href="#">test linkss</a></li>
      <li class="w-100 text-right"><a href="#">test link</a></li>
      <li class="w-100 text-right"><a href="#">test link</a></li>
      <li class="w-100 text-right"><a href="#">test link</a></li>
      <li class="w-100 text-right"><a href="#">test link</a></li>
      <li class="w-100 text-right"><a href="#">test link</a></li>
      <li class="w-100 text-right"><a href="#">test link</a></li>
      <li class="w-100 text-right"><a href="#">test link</a></li>
      <li class="w-100 text-right"><a href="#">test link</a></li>
      <li class="w-100 text-right"><a href="#">test link</a></li>
   </ul>
</ul>
<ul class="test d-block">
   <a class="text-bold" href="#">title1</a>
   <ul class="list">
      <li class="w-100 text-right"><a href="#">test linkss</a></li>
      <li class="w-100 text-right"><a href="#">test link</a></li>
      <li class="w-100 text-right"><a href="#">test link</a></li>
      <li class="w-100 text-right"><a href="#">test link</a></li>
   </ul>
</ul>
<ul class="test">
   <a class="text-bold" href="#">title</a>
   <ul class="list">
      <li class="w-100 text-right"><a href="#">test linkss</a></li>
      <li class="w-100 text-right"><a href="#">test link</a></li>
   </ul>
</ul>
<ul class="test">
   <a class="text-bold" href="#">title</a>
   <ul class="list">
      <li class="w-100"><a href="#">test linkss</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
   </ul>
</ul>
<ul class="test">
   <a class="text-bold" href="#">title</a>
   <ul class="list">
      <li class="w-100"><a href="#">test linkss</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
   </ul>
</ul>
<ul class="test">
   <a class="text-bold" href="#">title</a>
   <ul class="list">
      <li class="w-100"><a href="#">test linkss</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
   </ul>
</ul>
<ul class="test">
   <a class="text-bold" href="#">title</a>
   <ul class="list">
      <li class="w-100"><a href="#">test linkss</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
      <li class="w-100"><a href="#">test link</a></li>
   </ul>
</ul>

我添加了一个并将所有代码移到其中。

首先，删除所有浏览器默认样式:

然后将您的元素设置为Display：Flex，并使用属性gap设置该元素内部元素之间的间隙

我看得出来你在用顺风。如果它不起作用，您可能有其他一些类正在影响您的代码，请检查这些类。

  • TAG：
上一篇：JavaScript-如何在页面滚动 下一篇：JavaScript-React滚动
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！