幅が 980px のメニューをデザインしています。すべての li が左右から同じパディングを持つようにスタイルを設定したかったのです。すべてのメニューの分割後の平均パディングは同じです。例を添付します。
使用されるhtmlとスタイルは
<ul>
<li>
<a title="" href="javascript:void(0);"> <span class="catName">Furniture</span>
</a>
</li>
<li>
<a title="" href="javascript:void(0);"> <span class="catName">Art</span>
</a>
</li>
<li>
<a title="" href="javascript:void(0);"> <span class="catName">Test</span>
</a>
</li>
<li>
<a title="" href="javascript:void(0);"> <span class="catName">Testing Cate</span>
</a>
</li>
<li>
<a title="" href="javascript:void(0);"> <span class="catName">Testing Category</span>
</a>
</li>
</ul>
使用スタイル: -
ul li{
float: left;
height: 24px;
border-right: 1px solid #2e2f2f;
border-left: 1px solid #595a5b;
}
ul li a {
padding: 0 27px;
display: block;
line-height: 23px;
}
これを達成する方法についての提案。