Question

I'm working on my website, and I'm having an issue. I was wondering if I could get assistance with this. My hrefs have an unexplained white spaces between them. Any idea on how to fix it? Website link

之间的空白

.header {
    height: 50px;
    width: 100%;
    background-color: #fff;
    line-height: 50px;
    font-size: 20px;
    list-style: none;
}

.header div{
    float: right;
}

.header a{
    text-decoration: none;
    color: #000;
    display: inline-block;
    transition: background-color 1s ease, color 1s ease;
    padding: 0 10px;
}

.header a:hover{
    background-color: #5459ff;
    color: #fff;
}

<div class="header">
    <a href="#">Name</a>
<div>
<a href="#">Home</a>
<a href="#">Media</a>
<a href="#">Discord</a>
</div>
</div>

Answer 1

添加到CSS：

core.worktree

Answer 2

请勿使用浮点数。

.header {
  display: flex;
 }

Answer 3

嗯，这是常见的。根据您的CSS，代码中标记之间的空白（空格或制表符）将显示在页面中。删除空格后再看示例。更改CSS可以解决此问题，但是有时您需要注意代码中的空格。

.header {
	height: 50px;
	width: 100%;
	background-color: #fff;
	line-height: 50px;
	font-size: 20px;
	list-style: none;
}

.header div{
	float: right;
}

.header a{
	text-decoration: none;
	color: #000;
	display: inline-block;
	transition: background-color 1s ease, color 1s ease;
	padding: 0 10px;
}

.header a:hover{
	background-color: #5459ff;
	color: #fff;
}

<div class="header">
<a href="#">Name</a>
<div>
<a href="#">Home</a><a href="#">Media</a><a href="#">Discord</a>
</div>
</div>

Answer 4

前面两个答案已经为您提供了解决方案。但是您应该知道为什么会发生这种情况，以及如何在没有flex CSS属性的float的情况下克服这种情况。

为什么发生？

您将每个标记元素放在新行中，如下所示，

<a href="#">Home</a>
<a href="#">Media</a>
<a href="#">Discord</a>

因此，当您像这样放置时，元素之间会有space。每个空格都被视为一种字体，这就是为什么它继承了font-size，line-height等父字体属性的原因。因此，对于space，它占用单个字符大小的空间。

如何克服这个问题？

我已经在上面描述了为什么会这样，所以您只需在父容器中设置font-size: 0;。但是在这种情况下，您必须在元素上定义字体大小以使其可见。见下文：

     .header {
        height: 50px;
        width: 100%;
        background-color: #fff;
        line-height: 50px;
        font-size: 20px;
        list-style: none;
    }

    .header div {
        float: right;
        font-size: 0; /* New line to set font size for container */
    }

    .header a {
        text-decoration: none;
        color: #000;
        display: inline-block;
        transition: background-color 1s ease, color 1s ease;
        padding: 0 10px;
        font-size: 20px; /* New line to set font size elements */
    }

    .header a:hover{
        background-color: #5459ff;
        color: #fff;
    }

希望您能更好地理解

<a>

4 个答案: