关于响应式导航栏宽度的问题

http://www.hongkiat.com/blog/responsive-web-nav/

在跟着上面这个链接的教程里写响应式导航,写到@media screen and (max-width: 600px) 那部分的时候不太明白

nav a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }

根据描述是说此时ul 里每个li 都各占50% 的宽度,但是为什么这里面的a 又是100%的宽度呢?我试着改成50%,果然达不到图里的效果,有点懵逼了。。希望大神来解答下

阅读 3.2k
1 个回答

标签的层级关系,例如:

<div style="width:200px;">  //div 1
     <div style="width:100%;">   //div 2
         <div style="width:50%;">   //div 3
             <div style="width:100%;">   //div 4
             </div>
         </div>
     </div>
</div>

div2宽度等于100%,是相对于父级元素来说的,100%=div1的宽度=200px.
div3宽度50%=div2宽度的一半=100px。
div4宽度100%=div3的宽度=100px;
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题