0

おおよそのパディングが :5px 8px 5px 8px の 5 つのインライン リンクが必要です。固定マージン:0px 2px 0px 2px; 412px 幅の div 内にインラインで均等に分散

ここに例があります: http://www.branklin.com/questions/css_justified_links.php

4

2 に答える 2

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

ここで何が起こるかというとdisplay:block;、-tag の内側でa親タグが自動的に埋められるため、幅は必要なく、パディングとマージンが自動的に調整されます。float:left;が div に移動されることに注意してください。

別の方法は、もちろん、パディングとマージン、および最大幅を考慮して、リンクに固定幅を設定することですが、浮動小数点ピクセル値になってしまい、あまり良くありません。

于 2010-01-01T10:18:57.353 に答える
0

表示プロパティ (table、table-row、table-cell) を使用する最も簡単な方法です。

例：

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>
于 2010-01-01T10:26:39.383 に答える