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

问题描述

问 题

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%，果然达不到图里的效果，有点懵逼了。。希望大神来解答下

解决方案

标签的层级关系，例如：

<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;

这篇关于css - 关于响应式导航栏宽度的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！