列表和溢出的奇怪行为:隐藏
列表和溢出的奇怪行为:隐藏
提问于 2014-09-06 21:18:56
问题:如果使用溢出:隐藏在列表中的元素上(在"li“标签内)，会发生一些奇怪的事情。
HTML：
<ul class="test">
<li><a href="#">some text</a></li>
<li><a href="#">some text</a></li>
<li><a href="#">some text</a></li>
</ul>CSS：
ul {
list-style-position: outside;
}
a {
display: block;
}
ul.test a {
overflow: hidden;
}有效结果：
执行实体8-11的结果：
链接背后的一些空白。
Chrome的结果：
列表标记消失。
示例：http://jsfiddle.net/er1hsabb/2/
问:什么不对？如何防止这件事？
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-09-07 08:51:09
找到下一个解决方案：
- 隐藏标记
- 创建自己的标记使用:之前
增加CSS：
ul.test {
list-style: none;
padding-left: 0;
}
ul.test li {
position: relative;
padding-left: 40px;
}
ul.test li:before {
content: "●";
position: absolute;
left: 20px;
}请参阅：http://jsfiddle.net/er1hsabb/6/
所有的工作都在Opera，FF，Chrome和IE 8+。
默认情况下，“标记”大小更大，但它可能与CSS：http://jsfiddle.net/er1hsabb/7/不同。
Stack Overflow用户
发布于 2014-09-06 21:25:28
改变这种情况：
ul.test a {
overflow: hidden;
}对此：
ul.test li {
overflow: hidden;
}解决了IE上的间距问题，看上去与Chrome相似。工作JS小提琴
添加list-style-position: inside;解决了Chrome的list-style问题。请参阅这把小提琴
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25704847
复制相关文章
相似问题
腾讯云开发者
