如何删除导航中列表项之间的空格（HTML / CSS）

Question

我在删除导航中的li项目之间的空间时遇到了问题，我已经为项目设置了保证金：0px＆amp;锚（链接）但空间/间隙仍然存在。

如何删除这些空格？

＆＃13;

＆＃13;

/* navigation styles */

nav {
  background: rgba(6, 19, 72, 1);
  background: linear-gradient(to bottom, rgba(6, 19, 72, 1) 0%, rgba(15, 31, 91, 1) 100%);
}
.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.nav li {
  display: inline;
  margin: 0px;
}
nav ul.nav {
  width: 1120px;
  margin: 0 auto;
  min-width: 120px;
}
span.homeicon {
  width: 35px;
  height: 32px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  background-image: url('http://s16.postimg.org/cq68hbikx/home_icon.png');
  background-size: cover;
}
.nav a {
  display: inline-block;
  padding: 10px;
  width: 120px;
  text-decoration: none;
  color: white;
  font-family: arial;
  line-height: 30px;
  height: 30px;
  margin: 0px;
  border: 1px solid #344da7;
  border-top: none;
}
a.nav_home {
  max-width: 50px;
  width: 50px !important;
}
.nav a:hover {
  background-color: #344da7;
  height: 100%;
}

＆＃13;

<nav>
  <ul class="nav">
    <li><a href="" class="nav_home"><span class="homeicon"></span></a></li>
    <li><a href="">SPORTS</a></li>
    <li><a href="">LIVE CASINO</a></li>
    <li><a href="">SLOTS</a></li>
    <li><a href="">POKER</a></li>
    <li><a href="">PROMOTION</a></li>
    <li><a href="">BANKING</a></li>
    <li><a href="">AFFILIATE</a></li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

fiddle

Answer 1

这些空格实际上是由你的html中的空格引起的。

要解决此问题，请在float: left代码中添加<li>：

.nav li {
    float: left;
}

要确定它确实是HTML中的空白，请尝试将其删除并进行测试：

＆＃13;

＆＃13;

.nav {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
.nav li {
    display: inline;
    margin: 0px;
}
nav ul.nav {
    width: 1120px;
    margin: 0 auto;
    min-width: 120px;
}
span.homeicon {
    width: 35px;
    height: 32px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background-image: url('http://s16.postimg.org/cq68hbikx/home_icon.png');
    background-size: cover;
}
.nav a {
    display: inline-block;
    padding: 10px;
    width: 120px;
    text-decoration: none;
    font-family: arial;
    line-height: 30px;
    height: 30px;
    margin: 0px;
    border: 1px solid #344da7;
}
a.nav_home {
    max-width: 50px;
    width: 50px !important;
}
.nav a:hover {
    background-color: #344da7;
    height: 100%;
}

＆＃13;

<nav>
  <h1> With Whitespace </h1>
  <ul class="nav">
    <li><a href="" class="nav_home"><span class="homeicon"></span></a></li>
      <li><a href="">SPORTS</a></li>
    <li><a href="">LIVE CASINO</a></li>
    <li><a href="">SLOTS</a></li>
    <li><a href="">POKER</a></li>
    <li><a href="">PROMOTION</a></li>
    <li><a href="">BANKING</a></li>
    <li><a href="">AFFILIATE</a></li>
  </ul>
  
  <h1> Without Whitespace </h1>
  <ul class="nav">
    <li><a href="" class="nav_home"><span class="homeicon"></span></a></li><li><a href="">SPORTS</a></li><li><a href="">LIVE CASINO</a></li><li><a href="">SLOTS</a></li><li><a href="">POKER</a></li><li><a href="">PROMOTION</a></li><li><a href="">BANKING</a></li><li><a href="">AFFILIATE</a></li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试查看https://css-tricks.com/fighting-the-space-between-inline-block-elements/

您可能想尝试使用display: flex;代替https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

空格是由白色空间引起的。您应该确保每个SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ssX", Locale.US); 之间没有空格。

这样做的最佳方式IMO：

li

当然，您可以将整个布局更改为使用浮动，但这确实不是最好的方式，而且有点倒退。 <ul class="nav"><!-- --><li><a href="" class="nav_home"><span class="homeicon"></span></a></li><!-- --><li><a href="">SPORTS</a></li><!-- --><li><a href="">LIVE CASINO</a></li><!-- --><li><a href="">SLOTS</a></li><!-- --><li><a href="">POKER</a></li><!-- --><li><a href="">PROMOTION</a></li><!-- --><li><a href="">BANKING</a></li><!-- --><li><a href="">AFFILIATE</a></li> </ul> 专门用于解决使用浮动布局的问题。

Answer 4

要删除导航项目之间的空间，只需执行以下操作：

https://docs.scipy.org/doc/numpy/reference/generated/{element.qname}.html