Home / Questions / 302252
Accepted
ASASCED
Asked: 2020-10-20 22:53:27 +0800 CST 2020-10-20 22:53:27 +0800 CST

如何删除尾随空格CSS？

  • 772

我创建了这些元素来制作导航栏，但从 li 开始的问题是，当我放置属性时，它们在右侧有一个小空间，display: inline-block在导航栏的情况下，我只添加了白色背景颜色和shadow 它在底部放了一个我不知道为什么的空间。

在此处输入图像描述

CSS

nav {
    width: 100%;
    background-color: var(--bgColor);
    box-shadow: 14px 0px 23px -16px rgba(0,0,0,0.80);
    display: flex;
    justify-content: center;

    /*Variables*/
    --sideBar: #2f2e41;
    --bgColor: white;
    --fontFocus: #36d29e;
    --fontOn: #b1b1b1;
}

ul {
    background-color: blueviolet;
}

li {
    display: inline-block;
    height: 100px;
}

HTML

<nav>
  <ul>
    <li><a href="">Recipt</a></li>
    <li><a href="">Customers</a></li>
    <li><a href="">My account</a></li>
    <li><a href="">Reports</a></li>
    <li><a href="">UW Manager</a></li>
    <li><a href="">Logout</a></li>
  </ul>
</nav>

<div class="container">
  <div class="row">
    <div class="col-md-4">
      Column 1
    </div>
  </div>
</div>
html

1 Answers

  1. Best Answer

    出现的空间在元素ul、边距（左边空间）和间距（顶部和底部空间）中预定义，以消除它用值0定义它们。

    margin:0;
padding:0;

    在您的代码中，它看起来像这样：

    nav {
    width: 100%;
    background-color: var(--bgColor);
    box-shadow: 14px 0px 23px -16px rgba(0,0,0,0.80);
    display: flex;
    justify-content: center;

    /*Variables*/
    --sideBar: #2f2e41;
    --bgColor: white;
    --fontFocus: #36d29e;
    --fontOn: #b1b1b1;
}

ul {
    background-color: blueviolet;
    padding:0;
    margin:0;
}

li {
    display: inline-block;
    height: 100px;
}
    <nav>
  <ul>
    <li><a href="">Recipt</a></li>
    <li><a href="">Customers</a></li>
    <li><a href="">My account</a></li>
    <li><a href="">Reports</a></li>
    <li><a href="">UW Manager</a></li>
    <li><a href="">Logout</a></li>
  </ul>
</nav>

<div class="container">
  <div class="row">
    <div class="col-md-4">
      Column 1
    </div>
  </div>
</div>

    希望对你有帮助，问候。

    • 1