菜单 stepdown 呈递下沉的处理方式

2021-03-15 05:03 jianzhan



有关“stepdown”,的确不知道道能用甚么精辟的語言来描述他,实际上便是波动层下呈递下沉情况,如上图所示
这个画面让大家不难交往,笔者是想做1个菜单之类的物品,每一个块是左波动。
那让大家看看编码应当如何些吧:

像大多数数菜单1样,应当建立1个无编码序列表以下:
Xhtml:

拷贝编码
编码以下:

<ul id="menu">
<li><a href="#">My</a></li>
<li><a href="#">Little</a></li>
<li><a href="#">Menu</a></li>
</ul>

Css:

拷贝编码
编码以下:

ul#menu li a {
display: block;
width: 130px;
text-align: center;
font-weight: bold;
float: left;
color: white;
font-size: 1.2em;
text-decoration: none;
background: #600;
}

这些块全是左波动的,因此她们应当在1条水平网上,对么?回答是错的,之因此呈递下沉状况,就在于目录元素之中包括了锚点元素,尽管她们也是block-level元素,可是这些块其实不波动。这很错乱,由于块元素就像<br/>1样很当然的就回行了。这就致使了,无论当今行高是多少,下1个块全是下沉的,这便是"stepdown"。好啦解释结束了

补救的方法以下:

拷贝编码
编码以下:

ul#menu li {display: inline; /* Prevents "stepdown" */}

这样便可以让菜单在1个水平网上啦~~,以下:

好了总结结束,尽管许多人了解这个,但我想也以前以疑虑过,why??这下清晰啦~~~
假如感觉我说的不对的那就看原版吧,哈哈