412px 中 5 个链接的 CSS 对齐宽度

Question

我想要五个内嵌链接，内边距大约为 :5px 8px 5px 8px；和固定边距:0px 2px 0px 2px；在 412px 宽度的 div 内均匀分布

这是一个例子:http://www.branklin.com/questions/css_justified_links.php

Answer 1

这是我能得到的最接近的...您需要在链接周围添加另一个 div，否则它们不能在相对大小的同时具有填充/边距。 除非你的 padding 和 margin 也是相对的 %。

.section_left div {float:left;width:20%;}
.section_left a:link, .section_left a:visited { 
    display:block;margin:4px 0 0 2px;padding:5px 8px 5px 8px;
    text-decoration:none;background-color:#e6e6e6;color:#666;
    font-size:18px;font-family:Helvetica; }

<div><a href="#">..</a></div> # do this for each link

这里发生的是 a 标签内的 display:block; 导致它自动填充父标签，因此不需要宽度，并且填充并自动调整边距。请注意，float:left; 已移至 div。

替代方案当然是为链接设置固定宽度，同时考虑填充和边距以及最大宽度，但您最终会得到一个浮点像素值，这不太好。