标签: html-lists
如何在内联有序列表中显示数字？
我有一个清单..
<ol>
<li>Login</li>
<li>Address</li>
<li>Shipping</li>
</ol>
它显示十进制数字很好,但是当我设置<li>为内联或内联块时,数字会消失!我在网上看到其他地方提到我必须确保我有足够的边距和填充......我确信我做了(每个10 px!)还有其他原因这些数字可能会消失吗？我从萤火虫那里得知,一旦我取消选中'内联',他们就会回来......
css是
ol{
padding: 20px;
list-style-type:decimal;
}
ol li {
display: inline;
margin: 0 10px;
padding: 0 10px;
}
推荐指数
解决办法
查看次数
什么是这个子弹点<li>没有出现圆圈？
我试图在我的网页上显示一些子弹点列表圈,但它似乎没有显示,我尝试使用firebug但我找不到什么是错的,我浏览了整个css文件,我不知道看看问题出在哪里,我希望列表与圆圈垂直!
请帮帮我,这是代码:
/* Browser resets. */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 1em;
font-family: inherit;
vertical-align: baseline;
line-height: 1.5em;
}
#fancy_ajax .note{ cursor:default; …推荐指数
解决办法
查看次数
我可以在DL/DT/DD中放置任何东西吗？
我可以像无序/有序列表一样使用定义列表吗？
我的意思是在DT或DD中插入任何我想要的东西？
<dl>
<dt>
...
</dt>
<dd>
...
</dd>
</dl>
是否有任何浏览器或搜索引擎抱怨？
推荐指数
解决办法
查看次数
如何在无序列表中均匀分发HTML列表项
我希望li构成水平菜单的ul元素在我的元素宽度上均匀分布.我通常float我的li元素左移,并添加一定的余量.但是如何设置合适的间距使它们从ul元素的左边延伸到右边缘？
每个之间的间距必须相同li.但li元素可能有不同的长度.
推荐指数
解决办法
查看次数
CSS - 无序列表中项目符号之间的垂直线
我如何在无序列表中绘制子弹之间的垂直线,如下所示:
请注意,该行在最后一个列表项目符号处停止.我正在使用list-style:none;和图像作为子弹.HTML看起来像这样:
<ul class="experiences">
<!-- Experience -->
<li class="green">
<div class="where">New York Times</div>
<h3 class="what green">Senior Online Editor</h3>
<div class="when">2012 - Present</div>
<p class="description">Jelly-o pie chocolate cake...</p>
</li>
...
要求的CSS代码:
/* Experiences */
ul.experiences {
padding-left: 15px;
margin-top: -1px;
}
ul.experiences li {
padding-left: 33px;
margin-bottom: 2.5em;
list-style: none;
background: url('../img/misc/list-bullet-darkgray.png') no-repeat;
}
ul.experiences li.green {
background: url('../img/misc/list-bullet-green.png') no-repeat;
}
ul.experiences li.blue {
background: url('../img/misc/list-bullet-blue.png') no-repeat;
}
ul.experiences li.pink {
background: url('../img/misc/list-bullet-pink.png') no-repeat;
}
.where {
font-size: 1.2857em; …推荐指数
解决办法
查看次数
水平滚动条为ul
出于某种原因,我无法阻止UL和LI的包装.我希望UL的宽度恰好是一行中LI的宽度(没有包装),如果UL变得比nav-div(800px)宽,我想在导航中使用滚动条,这样我就可以滚动LI.
我用显示器,空白,宽度和高度做了很多尝试,但是如果我给UL一定的宽度,我只能让它工作.但是,这不是一个选项,因为页面是生成的,可以包含1-20个LI.
有没有人知道如何在不设置UL宽度的情况下制作滚动条？
HTML:
<div id="nav">
<ul id="navbuttons">
<li>Some text</li>
<li>Some text</li>
...
</ul>
</div>
CSS:
div#nav
{
height: 100px;
width: 800px;
margin-left: auto;
margin-right: auto;
}
div#nav ul li
{
margin-right: 15px;
float: left;
font-size: 12px;
list-style-type: none;
}
推荐指数
解决办法
查看次数
CSS - 文本溢出:省略号导致<li>的数字消失
我目前正在使用省略号来截断多个行长的订单列表.但是,太长并且需要省略号的li会自动删除左侧的数字.有没有办法防止这种情况发生？
没有css,list-items有数字.
<style>
#test li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<ol id="test" style="width:100px;">
<li>test1</li>
<li>test1</li>
<li>toooooooooooooooooo loooooooooooooooooonnnnnnnnnnnnnnggggggg</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
</ol>
推荐指数
解决办法
查看次数
CSS中的层次结构显示
我在为层次结构显示提供CSS时遇到了麻烦,比如文件和文件夹树.我使用嵌套的无序列表:
<ul>
<li>animals<ul>
<li>dogs</li>
<li>cats</li>
</ul></li>
</ul>
它们与正确的CSS减去连接线很好地显示.我需要连线.我使用以下CSS执行此操作:
ul ul li:before {
content: "";
padding: 15px;
border: 1px solid #000;
border-width: 0 0 1px 1px;
border-radius: 0 0 0 10px;
position: absolute;
left: -22px;
top: -15px;
}
问题是线条与动物,狗和猫的图标重叠.我尝试将z-index更改为无效.有没有更好的方法来实现这个CSS？还是有另一种方法让z-index有意义吗？
推荐指数
解决办法
查看次数
UL左边有保证金
出于某种原因,在我的页脚中,我的ul左侧有一个空格,因此它没有与上面的内容对齐(会员文本等)如果我要将文本放在这个ul之外(但仍然在页脚包装器内)那里没有这样的空间.
这是它的样子:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Ozanam Club </title>
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/normalize.css"/>
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/fonts/enigma.css" />
</head>
<body>
<div id="wrap">
<header>
<div id="logo"><a href="#"><img src="images/logo.png" height="157px" width="237px"></a></div>
<!--
<div class="social">
<ul>
<li><a href="#"><img src="images/icons/facebook.gif"/></a></li>
<li><a href="#"><img src="images/icons/twitter.gif"/></a></li>
<li><a href="#"><img src="images/icons/youtube.gif"/></a></li>
</ul>
</div>
-->
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Clubs</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">F.A.Q</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</header>
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<img …推荐指数
解决办法
查看次数
李项目两行.第二行没有保证金
我目前正在处理一个无序列表,其中包含带有标语的列表项.我有一个关于一个列表项的问题,这个问题很长,足以占用两行(见图)
我想要它,以便第二行与第一行对齐.这是我正在使用的HTML代码.我使用fontAwesome作为检查图像.
ul {
width: 300px;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="fa-ul custom-list">
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>我已经尝试 在"2"和"行"之间输入多个,但这对我来说似乎是一个非常糟糕的做法.我希望有人可以帮我解决这个问题.
推荐指数
解决办法
查看次数