css - 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，否则它们不能同时具有相对大小的填充/边距。除非您的填充和边距也是相对的 %。

.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

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

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

Answer 2

使用显示属性（表格、表格行和表格单元格）的最简单方法。

例子：

CSS：

div#links {
    display: table;
    width: 412px;
    border: dotted 1px gray;
}
div#links ul {
    display: table-row;
    margin: 0;
    padding: 0;
    list-style: none;
}
div#links ul li {
    display: table-cell;
    text-align: center;
}
div#links ul li a {
    padding: 5px 8px;
    background-color: gray;
    color: white;
}

和html：

<div id="links">
  <ul>
    <li><a href="#">Daily</a></li>
    <li><a href="#">Weekly</a></li>
    <li><a href="#">Monthly</a></li>
    <li><a href="#">Quarterly</a></li>
    <li><a href="#">Yearly</a></li>
  </ul>
</div>