Question

我在网站上使用了我的菜单标签。以下代码用于菜单（不介意php的东西，只是找到正确的相对路径并选择正确的类）：

<div id="menu">
            <a class="<?php echo $opis; ?>" href="<?php echo $pot; ?>">
                Opis
            </a>
            <a class="<?php echo $novosti; ?>" href="<?php echo $pot; ?>">
                Novosti
            </a>
            <a class="<?php echo $slikeVP; ?>" href="<?php echo $pot; ?>/slikeVP">
                Slike VP &amp; reportaže
            </a>
            <a class="<?php echo $podatki; ?>" href="<?php echo $pot; ?>/podatki">
                Trenutni podatki
            </a>
            <a class="<?php echo $arhiv; ?>" href="<?php echo $pot; ?>/arhiv">
                Arhiv
            </a>
            <a class="<?php echo $zanimiviDogodki; ?>" href="<?php echo $pot; ?>/arhiv">
                Zanimivi dogodki
            </a>
            <a class="<?php echo $povezave; ?>" href="<?php echo $pot; ?>/povezave">
                Povezave
            </a>
        </div>

CSS（我只提供未选择的，其他的几乎与不同的背景颜色相似。）：

.notSelected {
border-left: 8px solid #1958b7;
border-right: 8px solid #1958b7;
background-color: #2175bc;
color: #fff;
text-decoration: none;
padding: 1px 9px 5px 9px;

}

现在问题在于左右填充，设置为9px。我注意到第一个<a>Opis</a>到倒数第二个<a>Zanimivi dogodki</a>都有更大的右边距，然后是9px。最后一个元素<a>Povezave</a>的位置是9px，这是正确的。然后我用左右填充0px进行测试，除了最后一个（Povezave）之外，在所有元素后面右侧还有一些空间。似乎由于某种原因，除了最后一个元素之外，它们都在文本之后得到间距。现在我想知道为什么会这样，以及解决方案是什么。

Answer 1

这可能是因为a标签的关闭和打开之间的空白。

<div id="menu">
        <a class="<?php echo $opis; ?>" href="<?php echo $pot; ?>">
            Opis
        </a><a class="<?php echo $novosti; ?>" href="<?php echo $pot; ?>">
            Novosti
        </a><a class="<?php echo $slikeVP; ?>" href="<?php echo $pot; ?>/slikeVP">
            Slike VP &amp; reportaže
        </a><a class="<?php echo $podatki; ?>" href="<?php echo $pot; ?>/podatki">
            Trenutni podatki
        </a><a class="<?php echo $arhiv; ?>" href="<?php echo $pot; ?>/arhiv">
            Arhiv
        </a><a class="<?php echo $zanimiviDogodki; ?>" href="<?php echo $pot; ?>/arhiv">
            Zanimivi dogodki
        </a><a class="<?php echo $povezave; ?>" href="<?php echo $pot; ?>/povezave">
            Povezave
        </a>
    </div>

应该纠正它。

你知道你也左右挥动边框，对吧？

原来它是<a>标签内部的空白，在实际文本之前和之后。

Answer 2

选中此示例：http://jsfiddle.net/U2h5a/

看起来你想要渲染它。

<a> tag elements</a>系列填充问题

2 个答案: