Question

#headermenu ul li {
    width:195px;
    height:45px;
    float:left;
    left:0;
    text-decoration:none;
    text-align:center;
    font-family:century gothic;
    background-color:#fef3e2;
}

这是我的问题我一直在努力使宽度和高度达到一定的百分比，但显然它不起作用..我的问题是，有没有办法或是否有可能将此宽度和高度设置为百分比我不我想在这里使用表格，因为如果我在菜单中悬停时进行子菜单会被扭曲意味着它们将并排在彼此之上（我希望它们在彼此之上）...任何想法都表示赞赏..

更新：

http://jsfiddle.net/guradio/gvmRX/

在这个fidde中，您可以看到我将li尺寸更改为100以使其适合这是我想要使其宽度为百分比的原因，以避免超出宽度

Answer 1

为了能够以百分比形式提供height和width，您需要向父母提供width和height。

<强> HTML：

<ul>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
</ul>

<强> CSS：

ul li {
    width: 33%;
    height: 33%;
    float:left;
    left:0;
    text-decoration:none;
    text-align:center;
    font-family:century gothic;
    background-color:#fef3e2;
}

在这个演示中我们有<li>您可以看到它使用宽度作为百分比，因为父级已经设置了宽度（<ul>是块元素）但是高度未设置所以百分比高度不起作用。

Demo Here

现在让我们设置父母身高，看看它是否会改变任何东西。

添加了CSS：

html, body {
    height: 100%;
}

ul {
    height: 100%;
}

所以我们在这里设置html, body高度使用100％，然后还需要设置<li>的父级（同样<ul>是一个块元素，所以它有没有设定高度）。这允许我们使用百分比作为高度。

Demo Here

有任何问题请告诉我。

菜单内联菜单向左浮动，宽度和高度为纯css上的％

1 个答案: