Question

所以，我设置了这样的链接集。为坏名字道歉，但为了让它易于理解，我选择不使用真正的路径/名称。但是，所有路径都会在显示/使用页面时签出。

<nav>
     <div class="center">
         <a href="index.html" class="navigointi"> <img src="folder/image1.gif" alt=""> </a>
         <a href="page1.html" class="navigointi"> <img src="folder/image2.gif" alt=""> </a>
         <a href="page1.html" class="navigointi"> <img src="folder/image3.gif" alt=""> </a>
     </div>
</nav>

现在，我希望每个图像彼此粘在一起，这样它们就形成了一个长条。使用当前设置，它们都在页面中间排成一行。但是......每个之间都有空格。这是CSS：

.center {
    margin: 0 auto;
    text-align: center;
    display: block;
}

a.navigointi
{
    float:left;
    margin: 0px;
    padding: 0px;
}

img.navigointi
{
    margin: 0px;
    padding: 0px;
    border: 0px;
}

然而，如果我将图像指定为navigointi类......它们会粘在一起，形成一个长条，但同时它会打破中心。所有图像都浮动到屏幕的左侧。即使我从img.navigointi中删除了所有内容，因此它变为空样式，它仍然保持不变。如果我不给图像一个类，它们会返回到中间，但是再次使用它们之间的空格。

知道导致中心突破的原因是什么？

Answer 1

这是FIDDLE。

删除锚之间单个空格的行是font-size: 0px; （在CSS-Tricks上找到）

CSS

.center {
    margin: 10px auto;
    text-align: center;
    display: block;
    border: 1px solid black;
    font-size: 0px;
}

.navigointi{
    margin-left: 0px;
    padding: 0px;
}
img
{
    margin-left: 0px;
    padding: 0px;
    border: 1px solid red;  
}

Answer 2

如果我理解，您应该使用display: inline代替float: left。这是一个例子：http://jsfiddle.net/YTn2b/

与图像的链接不会留在中间

2 个答案: