Question

我有以下菜单。

HTML代码

<div class="container">
        <div class="links">
            <span class="link" href="#">Toate</span>
            <span class="link" href="#">Online</span>
            <span class="link" href="#">Noi</span>
            <span class="link" href="#">Top</span>
        </div>
        <div class="profile"></div>
    </div>

CSS代码

.topmenu {
    background: #6b00f3 linear-gradient(180deg, #7f0000, #6b0103) repeat scroll 0 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 48px;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
 }
.topmenu .container {
    height: 100%;
}
.topmenu .container .links {
    height: 100%;
}
.topmenu .container .links .link {
    box-sizing: border-box;
    height: 100%;
    text-decoration: none;
    padding: 0 10px;
    color: #fff;
}
.topmenu .container .links .link:not(:last-child) {
    border: 1px solid #630000;
}

现在，我的.link元素之间有一个间距。没有边距，没有填充。如果我将div.links复制粘贴到body中，结果相同（没有应用CSS）。如果我只复制正文中的span.link元素，则它们之间没有间距。我尝试添加width：auto on .links。我尝试在和.link之间切换。尝试显示：内联，内联 - 柔性，内联块......没有任何效果！

我该如何解决这个问题？

Answer 1

span是一个内联元素。把它们放在同一条线上，它们之间没有空格，如下所示：

ToateOnlineNoiTop

那应该删除它们之间的间距。

Answer 2

这是因为每个跨度都在它自己的行上，正如HappyDane和rkrishnan建议的那样，并且HTML将换行解释为空格。如果您希望将每个范围保持在自己的行上，可以将父元素的0设置为font-size，将。1rem设置为Set rstReportList = Currentdb.OpenRecordset("SELECT * FROM tbl_ReportList") rstReportList .movefirst Do Until rstReportList .EOF On Error Goto CantRun '--Never actually triggers strDb = rstReportList!Location & rstReportList!FileName Set appAccess = CreateObject("Access.Application") appAccess.OpenCurrentDatabase strDb '-- Error 7866 occurs here, code breaks For each qdf in appAccess.Currentdb.QueryDefs UpdateResults rstReportList!ID, rstReportList!FileName, qdf.name, qdf.SQL, qdf.Type Next qdf appAccess.DoCmd.Quit NextReport: rstReportList.MoveNext Loop Set rstReportList = Nothing Set appAccess = Nothing Exit Function CantRun: UpdateResults rstReportList!ID, rstReportList!FileName, "Error", "Error", 999 Set appAccess = Nothing GoTo NextReport End Function（或其他）

Answer 3

这里有点困惑你所追求的是什么。我认为你删除元素之间的填充。在哪里添加了'padding：0 10px;'第二个数字左右填充第一个是垂直的。

Answer 4

如果要保留标记，可以将font-size:0;设置为父元素（在本例中为.links），然后相应地设置span的字体大小。这也将删除间距

Answer 5

使用＆＃34; float：left＆＃34;对于＆＃39; .link＆＃39; span来消除它们之间不必要的空间。

.topmenu .container .links .link {
  box-sizing: border-box;
  height: 100%;
  text-decoration: none;
  padding: 0 10px;
  color: #fff;
  float: left;
}

Answer 6

这是你在寻找什么？我真的不明白你的问题。

<!DOCTYPE html>
<html>
 <head>
  <style>
   .container, .link {
     border-style: solid;
     border-width: 1px;
     background-color: red;
     float: left;
   }
  </style>
 </head>
 <body>
  <div class="container">
    <div class="links">
        <span class="link" href="#">Toate</span>
        <span class="link" href="#">Online</span>
        <span class="link" href="#">Noi</span>
        <span class="link" href="#">Top</span>
    </div>
    <div class="profile"></div>
  </div>
 </body>
</html>

Answer 7

<强> DEMO

HTML

=LEFT(A1, 2)
=SEARCH(A3, A1)

CSS

<div class="container">
  <div class="links">
    <span class="link" href="#">Toate</span><span class="link" href="#">Online</span><span class="link" href="#">Noi</span><span class="link" href="#">Top</span>
  </div>
  <div class="profile"></div>
</div>

希望这有帮助。

Answer 8

在.link类的CSS中添加 float：left ，如下所示。这会将元素浮动到父DIV内部。因此将删除间距。

.topmenu .container .links .link {
box-sizing: border-box;
height: 100%;
text-decoration: none;
padding: 0 10px;
color: #fff;
float:left;
}

Answer 9

可能的快速解决方法是删除HTML代码中的间距。这是一个常见的已知错误，浏览器会导致错误。

您的HTML代码必须如下所示：

 <span class="link" href="#">Toate</span><span class="link" href="#">Online</span><span class="link" href="#">Noi</span><span class="link" href="#">Top</span>

SPAN类之间不能有任何间距。

元素之间的HTML异常间距

9 个答案: