1

我正在设计一个菜单，宽度为 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;
}

任何建议如何实现这一目标。

4

2 回答 2

1

这将使双方的所有内容都li a相同padding，并允许它们扩展以填充父项：27pxul

ul {
    list-style-type: none;
    height: 24px;
    width: 978px; /* 980px - side borders width  --> total width 980px*/
    border-right: 1px solid #2e2f2f;
    border-left: 1px solid #595a5b;
    margin: 0;
    padding: 0;
    display: table;
}
li {
    line-height: 23px;
    display: table-cell;
    text-align: center;
    width: auto;
}
li a {
    display: block;
    border-right: 1px solid #2e2f2f;
    border-left: 1px solid #595a5b;
    height: 24px;
    padding: 0 27px;
}

演示

于 2013-04-07T06:22:05.627 回答
-1

固定标题宽度（980px）+所有li的左右填充相同+上面发布的匹配图+跨浏览器（chrome+firefox+ie9）。请享用 ：）

CSS（填充以 % 指定）：

div{
    background:red;
    width:980px;
}
ul{
    display:table;
    list-style:none;
    margin-left:-40px;
    width:100%;
}
ul li{
    background:pink;
    border-left:2px solid black;
    border-right:1px solid black;
    display:table-cell;
    padding:0% 2% 0% 2%;
    text-align:center;
    width:9%;
}

HTML（只是添加了一个外部 div）：

<div>
    <ul>
        <li>
            <a title="" href="javascript:void(0);"> <span class="catName">Furniture</span></a>
        </li>
        <!-- and 9 more <li>'s -->
    </ul>
</div>

从技术上讲，它的填充相等。当然，如果您在 980px 区域中只有 5 个小项目，它们将是不相等的。如果您只插入准确的 10 个标签，如图所示，它的填充大致相等（无论如何都足够接近）

于 2013-04-07T06:25:58.323 回答