链接被包裹在各自对应的
  • 标签中。它们才是我们要找的外边距的上下文元素。" />

    流式布局时刻牢记上下文

    发布日期:2015-07-28 10:19:53
    可以看到<a href="#">链接被包裹在各自对应的<li>标签中。它们才是我们要找的外边距的上下文元素。看看<1i>标签对应的CSS代码,会发现没有为其设置宽度:
    #navigation ul li{display:inline-block;}
    这种情况很常见,不过我们有很多方法解决这个问题。我们可以给<li>标签设置一个明确的宽度值,这个值必须得是一个固定像素宽度或者是一个相对于其包裹元素
    (#navigation div)的百分比值,但这两种值都无法保证<li)中的文字灵活可变。此外我们可以修改<li>现在的CSS代码,将inline-block改为inline:
    #navigation u1 1i{
    display: inline;
    }
    使用display: inline;(这样可以阻止<li>元素渲染为块级元素)还可以使导航在不支持inline一block的老版本Internet Explorer(版本6和7)中水平显示。不过,我是inline-block的粉丝,因为它允许我们在现代浏览器中有效的控制外边距和内边距,所以我会让<li>标签继续保持inline-blocks状态(一会可以给IE6和IE7追加一个覆写样式),然后将(没有明确的上下文的)<a>标签上的百分比外间距挪到<li>上来。
    修改后的样式如下所示:
    #navigation u1 1i{
    display:inline-block;
    margin-right: 2.6595745%;
    }
    #navigation ul li a{
    height:42px;
    line-height:42px;
    text-decoration:none;
    text-transform:uppercase;
    font-family:Arial,"Lucida Grande",Verdana,sans-serif;
    font-size:27px;
    color:block;
    }
    导航区域的修改现在告一段落,但是导航链接在视口变小时仍然会折成两行,只有到了视口小于768像素时,第2章编写的媒体查询才能覆写当前的导航样式。在着手修正导航部分的问题之前.我准备先将文字大小从像素尺寸修改为相对单位em。完成这个工作之后.我们就会注意到另外一个被忽略的问题.即让图片随着页面的变化缩放。
    如果对你有用可以收藏我们的网站,北京网站建设:http://www.mcykj.com/blog/

      Copyright © 2010-2018 北京梦创义科技
    公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

    联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计