Question

我需要在每一tag子身上显示以下清单,以掌握整个ul。脂重500吨;

<ul>
<li><a href="#">Home</a>a href="#">Home</a></li>
<li><a href="#">About us</a><a href="#">About us</a><a href="#">About us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">FAQs</a><a href="#">FAQs</a></li>
<li><a href="#">Contact us</a></li>
</ul>

也就是说,如果只有1 a,那么,如果只有3个选区,则标的宽度为100%,则标的宽度为33%。

我知道,我可以做些什么是“过去3年”的利等级,但是否有更清洁的方法这样做?

Answer 1

而I d则给出附加说明的<代码>ul 内容id= navbar ,并按以下方式界定特性:

#navbar {/*properties for ul*/}
#navbar a {/*properties for a element*/}
#navbar li (/*properties for li element*/}

这应使你能够控制多种未经排序的清单内容,而不要把你不同的类别混为一谈。

Answer 2

这不是要为国际电算中心提供帮助,但我认为我分享我们现在在Gecko和WebKit浏览器方面可以做的工作,希望很快在其他浏览器中,并利用CSS3灵活箱式 La光模块。它非常强大。你今天可以想象会利用你选择的另一种技术,作为其他浏览器的反馈。

To see how it works, paste this into your text editor, save it, and run it in a recent version of Firefox, Chrome or Safari:

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>
      ul {
        list-style: none;
        padding: 0;
        width: 500px;
        background: gray;
        }
      li {
        width: 500px;
        display: -moz-box;
        display: box;
        -moz-box-orient: horizontal;
        -webkit-box-orient: horizontal;
        box-orient: horizontal;
        }
      li a {
        display: block;
        text-align: center;
        -moz-box-flex: 1;
        -webkit-box-flex: 1;
        box-flex: 1;
        margin: 2px;
        background: silver;
        }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#">One</a></li>
      <li><a href="#">Two.one</a><a href="#">Two.two</a><a href="#">Two.three</a></li>
      <li><a href="#">Three.one</a><a href="#">Three.two</a></li>
    </ul>
  </body>
</html>

最终结果应当从FF3.6中看一看:

“显示宽度弹性箱的

我在。另见。 http://www.html5rocks.com/tutorials/flex Box/quick/。

Answer 3

c :

a { display:table-cell; }
li { display: table-row; }
ul { display: table; }

I can t test this right now (submitting from my cell phone) but it should be easy enough to find out.

友情链接