我正在尝试创建一个菜单系统,它根据有多少“li”条目水平地自动调整大小,以便我们使用XSLT动态创建网页.我的想法是CSS是否可行？
nav[role="navigation"] li {
float: left;
width: 10.00%; /* I want to dynamically set this width */
}
有问题的HTML片段
<nav role="navigation" count="2"><?xml version="1.0" encoding="utf-8"?>
<ul>
<li>
<a href="movies.html">Movies</a>
</li>
<li>
<a href="news.html">News</a>
</li>
<ul>
</nav>
我的想法是这样的事情是否可能用参数调用CSS,或者我反对它的声明方式？
nav[role="navigation"] li param {
float: left;
switch(param)
{
case : 5
{
width: 20.00%;
}
case : 3
{
width: 33.33333%;
}
}
}
解决方法
CSS不是一种编程语言. CSS3在这里或那里有一点逻辑,但没有switch().
为了您的目的,到目前为止,最简单的解决方案是一个javascript,这里提供假设您使用jQuery：
var $navLis = $('nav[role=navigation] > ul > *');
$navLis.addClass('count'+$navLis.length); // add a class to every li indicating
// total number of list items
然后在你的CSS中
nav[role=navigation] li { /* default styling & width */ }
nav[role=navigation] li.count2 { /* your conditional styling */ }
nav[role=navigation] li.count5 { /* your conditional styling */ }
/* etc */
或直接使用jQuery设置宽度：
$navLis.style('width',(100/$navLis.length)+'%');
如果你要求纯CSS,那就得出你的逻辑帽子,看看CSS3 selectors specification.你可以构造一些拜占庭式,而且比较脆弱的CSS代码可以伪造逻辑,比如下面的选择器.
nav[role=navigation] li:first-child + nav[role=navigation] li:last-child {
/* matches last of two items if a list has only two items */
}
如果您使用的CMS知道将要放入的列表中有多少项目,那么您可以通过在您的CSS中添加一点PHP来获得您的服务器后端：
<?PHP header('Content-type: text/css'); if (isset($_GET['navcount']) && $_GET['navcount'] != "") { $navcount = $_GET['navcount']; } else { $navcount = 5.0; } // Default value ?> /* ... your css code here... */ nav[role="navigation"] li { float: left; width: <?PHP echo (100.0/$navcount); ?>%; }
那么你从你的HTML请求这样的CSS / PHP脚本：
<link rel="stylesheet" type="text/css" href="/path/to/style.PHP?navcount=5" />
有一些很棒的工具,用于编写可以很好地混合到CSS中的样式表,有些甚至可以动态地提供PHP实现.现在最强大的CSS扩展是Sass,它只是你要找的语法.我建议使用Sass通过Compass,这是一个真正给它一些牙齿的Sass框架.您可以使用phamlp在PHP中将Sass解析为CSS
虽然指南针(和Sass)是非常棒的工具,但将其插入现有项目可能比其价值更麻烦.你可能只想使用Javascript做简单的逻辑.
