Question

前言：经验丰富的编码员，对CSS非常陌生。

我设计了一个使用包装器的网站，并且有一个水平横幅，我希望在顶部填充链接（就像在顶部列出其类别的零售网站一样）。

我已将所有链接放在toplink课程中，并设置了position:relative;。我的目标是使用top:和left:来定位它们，然后通过将所有填充左侧设置为一定程度来将它们分开。但是，当我这样做时，最后2个链接总是跳出包装器并移动到整个包装器的左侧。

关于如何实现这个的更好的想法？我不一定需要解决方案，只是关于如何在更好的道路上行动的一些想法。

Answer 1

尝试删除position:relative和top:0; left:0;内容并在锚点上使用float:left。

Answer 2

您没有position: relative或float: left水平对齐它们。

锚点是内联元素，因此它们无论如何都会水平对齐。但是，您可以添加一些填充以在视觉上将它们分开。

Answer 3

假设有一些简单的标记：

<ul id="nav">
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
    <li><a href="#">link 4</a></li>
    <li><a href="#">link 5</a></li>
</ul>

1）要将text-align:justify与带有100％宽度

之后的伪元素隔开，请使用

#nav {
    text-align: justify;
    min-width: 500px;
}
#nav:after {
    content: '';
    display: inline-block;
    width: 100%;
}
#nav li {
    display: inline-block;
}

FIDDLE

（调整浏览器窗口大小，同时查看从标记添加/删除列表项时会发生什么）

CSS

#nav {
    display:table;
    table-layout: fixed;
    width: 100%;
}
#nav li {
    display: table-cell;
    height: 25px;
    background: beige;
    border: 1px solid brown;
    text-align: center;
}

2）如果您正在寻找扩展/收缩的链接 - 您应该使用css表格

FIDDLE

（调整浏览器窗口大小，同时查看从标记添加/删除列表项时会发生什么）

CSS

{{1}}

间距链接在中心包装上

3 个答案:

CSS

CSS