当前位置：文江博客话题详情

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

发布于 2024-08-16 17:33:07 字数 258 浏览 7 评论 0原文

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

是一个示例： http://www.branklin.com /questions/css_justified_links.php

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

执笔绘流年 2024-08-23 17:33:07

这是我能得到的最接近的...您需要在链接周围添加另一个 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

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

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

This is the closest I could get it... You need to add another div around the links, or they can't have padding/margins at the same time as being relatively sized. Unless your padding and margins are also relative %.

.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

What happens here is that the display:block; inside the a-tag causes it to automatically fill the parent tag, so no width is needed, and the padding and margins are automatically adjusted for. Note that the float:left; is moved to the divs.

The alternative is of course to set a fixed width to the links, taking into account the padding and margins and the max width, but you'd end up with a floating point pixel value, which isn't so nice.

回复收藏 0 原文

眼波传意 2024-08-23 17:33:07

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

示例：

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>

the easiest way to do it with display property (table, table-row and table-cell).

example:

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;
}

and the 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>

回复收藏 0 原文

~没有更多了~