标签: html-lists
数字嵌套HTML中的有序列表
我有一个嵌套的有序列表.
<ol>
<li>first</li>
<li>second
<ol>
<li>second nested first element</li>
<li>second nested secondelement</li>
<li>second nested thirdelement</li>
</ol>
</li>
<li>third</li>
<li>fourth</li>
</ol>
目前,嵌套元素再次从1开始,例如
- 第一
- 第二
- 第二个嵌套的第一个元素
- 第二个嵌套的第二个元素
- 第二个嵌套的第三个元素
- 第三
- 第四
我想要的是第二个元素编号如下:
- 第一
第二
2.1.第二个嵌套的第一个元素
2.2.第二个嵌套的第二个元素
2.3.第二个嵌套的第三个元素
- 第三
- 第四
有办法做到这一点吗？
推荐指数
解决办法
查看次数
javascript - 随机播放HTML列表元素顺序
我有一个清单:
<ul>
<li>milk</li>
<li>butter</li>
<li>eggs</li>
<li>orange juice</li>
<li>bananas</li>
</ul>
使用javascript如何随机重新排序列表项？
推荐指数
解决办法
查看次数
我可以使用CSS为任何元素添加项目符号吗？
很简单的问题,但我不确定是否可能.我想添加一个图像作为所有<h1>元素中的子弹.我知道我可以通过以下方式实现:
<span class='bullet'></span><h1>My H1 text here</h1>
用css:
.bullet{
background: url('bullet.png') no-repeat;
display:inline-block;
vertical-align: middle;
background-size:100%;
height:25px;
width:25px;
margin-right: 5px;
}
但有没有一种自动的方法来做同样的事情？我想的是:
h1{
list-style-image: url('bullet.png');
}
但这似乎只适用于<ul>元素.我真的不想在<span>元素之前到处粘贴<h1>元素.有任何想法吗？
推荐指数
解决办法
查看次数
当我们不能使用字形字体时,如何使用列表的字体大小制作列表样式图像比例？
我正在研究的网页在列表中使用了一些花哨的V形符号.我想定义一个列表样式,它可以根据列表项本身的字体大小进行扩展:这样做是我问题的最终目标.
我们目前将这些V形文件保存在SVG文件中(其中一个在下面提供),因此它们可以放大而不会看起来很糟糕.他们被引用如下:
ul.foo {
list-style-image: url("../images/chevron.svg");
}
我们在网站周围使用这些雪佛龙列表几次.有时他们使用大文本,有时文本较小或正常.我们不得不为每个字体大小(例如一个新的字形图像chevron-small.svg,chevron-medium.svg,chevron-large.svg,等),但肯定有一个更好的办法,让我们只使用了一个图像,并把它放大和缩小在自己的基础上的字体尺寸!
但是,我还没有想出如何使用字体大小来缩放图像.
列表样式图像的W3 wiki表明"如果图像的固有宽度或高度以百分比形式给出,则该百分比将根据1em来解决",这听起来就像我们想要的那样.我还没有弄清楚如何实现这一目标.布赖恩·坎贝尔的回答给我怎样才能让一个SVG的规模与其父容器？似乎提出了一种方法来使这个百分比发生,但是当我设置100%的宽度或高度时,即使字体很大,人字形的子弹点也会显得非常微小或根本没有.
如何使用文本大小完全实现此列表样式图像缩放,以便当UL的文本大小变大时,子弹图像也会如此？
(字形字体:我们不能使用它们.它们可以在视觉上完成工作,但是它们对可访问性产生了不良影响,因为屏幕阅读器不会将子弹读出为子弹,而是作为其他一些奇怪的字符.我们可以定义可能是自定义字形字体,并用它们替换它中的项目符号字符,但这样做的文件大小开销会过大.据我所知,我们需要使用图像.)
我的SVG代码
SVG来自Illustrator并具有以下代码:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="8px" height="14px" viewBox="0 0 8 14" enable-background="new 0 0 8 14" xml:space="preserve">
<path fill="#666666" d="M0.37,12.638l5.726-5.565L0.531,1.347C0.252,1.059,0.261,0.601,0.547,0.321
c0.289-0.279,0.746-0.272,1.026,0.016l6.062,6.24c0,0.002,0.006,0.004,0.008,0.006c0.068,0.07,0.119,0.156,0.156,0.244
C7.902,7.088,7.846,7.399,7.631,7.61c-0.002,0.004-0.006,0.004-0.01,0.006l-6.238,6.063c-0.143,0.141-0.331,0.209-0.514,0.205
c-0.187-0.006-0.372-0.078-0.511-0.221C0.076,13.376,0.083,12.919,0.37,12.638"/>
</svg>
其中显示如下,其中文本是16px,并且V形符号没有缩放到字体大小,但是相当大且可见(在这种情况下比想象的要大一点,但是让我们忽略它,因为图像本身可以被编辑): …
推荐指数
解决办法
查看次数
LI元素的文本分隔符
我想在我的li元素之间添加一个正斜杠('/'),但我不确定在语义上这样做的最佳方法.现在,我只是在li标签中包含正斜杠,并在不间断空格中添加间距,如下所示:
<ul id="footer_menu">
<li>Customer Support /</li>
<li>Shipping Info /</li>
<li>Size Charts /</li>
<li>Privacy Policy /</li>
<li>Contact</li>
</ul>
你怎么看？谢谢.
推荐指数
解决办法
查看次数
如何在导航菜单和页脚链接中隐藏<li>项目符号但是显示列表项目
我有一个导航菜单,页脚和幻灯片,使用列出的样式列出链接和图像.我有css list-style:none;设置隐藏导航和页脚中的链接和图像旁边的项目符号,但我想显示列表正常文本的项目符号.
我怎样才能做到这一点？
推荐指数
解决办法
查看次数
管理内联列表项之间的空白的最佳方法
我的HTML如下:
<ul id="nav">
<li><a href="./">Home</a></li>
<li><a href="/About">About</a></li>
<li><a href="/Contact">Contact</a></li>
</ul>
而我的css:
#nav {
display: inline;
}
然而,li之间的空白显示出来.我可以通过折叠它们来删除空格,如下所示:
<ul id="nav">
<li><a href="./">Home</a></li><li><a href="/About">About</a></li><li><a href="/Contact">Contact</a></li>
</ul>
但这主要是通过手工维护,我想知道是否有更清洁的方法.
推荐指数
解决办法
查看次数
有序列表显示IE9中的所有零
我有一个<ol>(有序列表),在FF,Safari,Chrome中它可以正确呈现.但是在IE9中它显示全部为零.这不是间距/填充问题,因为我能够看到零.
我的HTML如下:
<ol>
<li>Enter basic company information</li>
<li>Select from our portfolio of products</li>
<li>Attach your employee census</li>
<li>Review your selections and submit your request.</li>
</ol>
任何人遇到这个问题,希望是一个解决方案？
推荐指数
解决办法
查看次数
如何在twitter bootstrap元素后创建换行符？
我道歉,因为这看起来很简单.
以下一个元素在换行符上的方式插入换行符的正确方法是什么？似乎有些东西会自动执行此操作(例如<p>在`内),但我看到下一个元素可以出现在最后一个元素旁边的行为.
HTML:
<ul class="nav nav-tabs span2">
<li><a href="./index.html"><i class="icon-black icon-music"></i></a></li>
<li><a href="./about.html"><i class="icon-black icon-eye-open"></i></a></li>
<li><a href="./team.html"><i class="icon-black icon-user"></i></a></li>
<li><a href="./contact.html"><i class="icon-black icon-envelope"></i></a></li>
</ul>
<BR /> <!-- It seems dumb to need this! Is this really how -->
<BR /> <!-- to get a newline? -->
<BR /> <!-- Well, it's what -->
<BR /> <!-- I'm doing now, I suppose... -->
<BR />
<div class="well span6">
<h3>I wish this appeared on the next line without having to …推荐指数
解决办法
查看次数
使用CSS自定义列表项目项目符号
是否可以改变<li>元素子弹的大小？
看看下面的代码:
li {
list-style: square; // I want to change the size of this squared bullet.
}
我似乎无法找到任何方法来实现这一目标.
推荐指数
解决办法
查看次数