Question

我正在设计一个宽度为980px的菜单。我想以这样的方式设置它们的样式，使得所有的li都具有左右相同的填充。所有菜单的划分后的均值具有相等的填充。附例。

enter image description here

使用过的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;
}

有任何建议如何实现这一点。

Answer 1

这将使两侧的所有li a padding 27px ul相同，并允许它们展开以填充父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; }：

{{1}}

DEMO

Answer 2

fixed header width (980px) + All the li's have same padding from left and right + Matches diagram posted above + cross-browser(chrome+firefox+ie9). enjoy :)

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个标签，如图所示，其大致相等的填充（无论如何足够接近）

列表元素两侧的宽度相等

2 个答案: