HTML   发布时间:2022-04-14  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了html – 溢出:隐藏为ul标签做什么?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用本文中的说明创建多列列表:

http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

简而言之,它表示要按照以下方式做一些事情:

HTML:

<div class='block'>
  <ul>
    <li>
      Item1
    </li>
    <li>
      Item2
    </li>
    <li>
      Item3
    </li>
  </ul>
</div>

CSS:

.block {
    border: 1px solid black;
    padding: 10px;
}
.block ul {
    width: 100%;
    overflow: hidden;
}
.block ul li {
    display: inline;
    float: left;
    width: 50%;
}

它的工作非常精彩,但我对溢出感到难以置信:隐藏的CSS声明.

没有它,我的外部div就像这样崩溃:

http://jsfiddle.net/alininja/KQ9Nm/1/

当它包含在内时,外部div的行为与我希望的完全一样:

http://jsfiddle.net/alininja/KQ9Nm/2/

我想知道为什么溢出:隐藏是触发这种行为.我希望它能切断内部的li项而不是强迫外部div扩展到必要的高度.

谢谢你的期待!

解决方法

除非您将溢出设置为隐藏,滚动或自动,否则任何可能浮动的内部都不会被剪裁.该方法的真正神奇之处在于,在没有给元素设置高度的情况下,当你将overflow设置为hidden时,它会占用内部元素的高度.

这里div不会包围img,因为img是浮动的.

<div><img style="float:left;height:100px" /></div>

这里div将实现img的高度,现在有一个适当的溢出.

<div style="overflow:hidden"><img style="float:left;height:100px" /></div>

如果你给它一个设定的高度然后设置溢出隐藏它会切断任何本来溢出的东西.

<div style="overflow:hidden;height:50px"><img style="float:left;height:100px" /></div>

请注意,在很多情况下,可以使用这些技术来避免明确:两种类型的额外标记.

大佬总结

以上是大佬教程为你收集整理的html – 溢出:隐藏为ul标签做什么?全部内容,希望文章能够帮你解决html – 溢出:隐藏为ul标签做什么?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。