我想创建一个这样的多列列表:https: //jsfiddle.net/37dfwf4u/
为每列使用不同的列表时没问题:
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<ul>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
ul {
display:inline-block;
}
但是,这可以通过连续列表和纯CSS来完成,以便CSS自动排列列吗？例如,使用我还不熟悉的flex布局？
我有以下测试页面和CSS.显示时,每个列表项之间有4px的间隙.如何让物品彼此相邻？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<link type="text/css" rel="stylesheet" href="/stylesheets/test.css" />
</head>
<body>
<div>
<ul class="nav">
<li class="nav"><a class="nav" href="#">One1</a></li>
<li class="nav"><a class="nav" href="#">Two</a></li>
<li class="nav"><a class="nav" href="#">Three</a></li>
<li class="nav"><a class="nav" href="#">Four</a></li>
</ul>
</div>
</body>
</html>
css:
ul.nav, ul li.nav {
display: inline;
margin: 0px;
padding: 0px;
}
ul.nav {
list-style-type: none;
}
li.nav {
background-color: red;
}
a.nav {
background-color: green;
padding: 10px;
margin: 0px;
}
a:hover.nav {
background-color: gray;
}
我有一个菜单<ul>.每个菜单项都是a <li>并且当前可单击.基于某些条件,我想禁用(使其不可点击)特定<li>元素.我怎样才能做到这一点？我尝试使用disabled的属性<li>,并list-style:none为好.都没有奏效.有什么建议？
我有一个无序列表,我试图控制悬挂缩进.对于溢出到两行的项目,我希望第二行文本直接排在前一行文本下面(不在项目符号下面).我完全按照我想要的方式在Chrome中使用它.然而,它在Firefox和Internet Explorer中有点偏差.
这是我现在拥有的:
<ul style="list-style: disc inside none; margin-left: 0; padding-left: 1em; text-indent: -1em;">
<li>50 – 180</li>
<li>950 – 2150</li>
<li>Dual IF: 70/140, L-Band & L-Band monitor (standard)</li>
</ul>
有没有办法在所有浏览器中使这个渲染相同？
我刚刚发现了一些有趣的东西.假设我有一个HTML列表:
<ol>
<li>Lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula.</li>
</ol>
这个CSS:
li {
white-space: nowrap;
overflow: hidden;
}
正如预期的那样,最后一个项目中的长文本在离开容器的宽度时确实被删除了.但!列表项目编号也受overflow属性影响,不会显示.
但是,像这样修改CSS:
ol {
overflow: hidden;
}
li {
white-space: nowrap;
}
按预期工作(文本不会出自容器,但会显示列表项).至少对于Firefox 4 beta10来说,这一切都是如此.
难道你不认为受此影响的编号overflow有点不合逻辑吗？为什么会这样？这是有意的行为吗？它是在规范中还是只是有些奇怪的人忘了处理？
这似乎是有效的display: inline;和display: inline-block;太.
这就是我的意思:
ul li {
display: block;
/* Or display: inline; */
/* Or display: inline-block; */
}
<ul>
<li>list item1</li>
<li>list item3</li>
<li>list item3</li>
</ul>
列表样式我指的是实际的"子弹"或"数字"(何时<ol>使用)
有没有人知道使子弹点位于多行项目符号列表顶部的CSS？出于某种原因,我使用的模板中心点位于左侧,而不是简单地坐在第一个单词旁边,如果我有多行文本.
我需要将无序宽度的无序列表居中,同时仍保持列表项左对齐.
获得与此相同的结果:
HTML
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
CSS
div { text-align: center; }
ul { display: inline-block; text-align: left; }
除了我<ul>没有父div.ul { margin: 0 auto; }不起作用,因为我没有固定的宽度.ul { text-align: center; }不起作用,因为列表项不再左对齐.那么我如何<ul>在保持<li>s左对齐的同时将其居中(没有父div包装器)？
<ul>
<li></li>
<li></li>
<li></li>
</ul>
编辑:也许我的措辞是不是最好的...第一个代码块已经工作...我需要的是做不的<div>包装,如果可能的话,当然.漂浮技巧？伪元素技巧？一定有办法.
我的系统中有一个垂直菜单,基本上由HTML ul/ liCSS样式组成(见下图).但是我不希望li比菜单更宽的项目换行,我希望它们溢出菜单底部的水平滚动条.我怎么能在CSS中这样做？
IE8中的子弹是如此之小,我尝试改变字体大小,但这不起作用.码:
<ul style="padding:0; margin:0; margin-left:20px;">
<li>item 1</li>
<li>item 2</li>
</ul>
没有使用子弹的图像有没有办法做到这一点？
css ×10
html-lists ×10
html ×7
center ×1
css3 ×1
flexbox ×1
javascript ×1
listitem ×1
overflow ×1