Question

导航条最大的问题之一是，每当试图在标题中添加徽标时，我总会发现图像会自动调整为比文本更小而不是更晚。

在下面的例子中，我在导航/标题栏的一端有一个标题，在另一端有一个图像。调整大小甚至移动设备时，图像变得非常小。

html ...

   <div id="nav">
       <p>Crowes</p>
       <img src="pic.jpg" />
   </div>

..和CSS

#nav { 
            background-color: #7E0E0A; 
            box-shadow: 1px 1px 1px 1px black; 
            padding: 1%; 
            font-size: 5vh; 
            color: white; 
            font-weight: bold; 
            font-family: 'Pacifico'; 
            overflow: auto; 
            width: 100%; 
            z-index: 1;
        }

            #nav p { 
                margin-left: 2%;
                margin-top: 1%; 
                margin-bottom: 1%; 
                float: left;
                color: white;
            }

            #nav img { 
                display: inline-block; 
                width: 6%; 
                vertical-align: middle;
                float: right; 
                border-radius: 50%; 
                border: 2px solid white; 
                margin-right: 3%; 
                opacity: 0.7;
                transition: all 0.2s ease;
            }

Answer 1

它不仅仅是改变元素的大小，也是它们的定位。这一切都必须更改为ems而不是%。

（NAV特异性）

#nav { 
            background-color: #7E0E0A; 
            box-shadow: 1px 1px 1px 1px black; 
            font-size: 2.3em;
            color: white; 
            font-weight: bold; 
            font-family: 'Pacifico'; 
            overflow: auto; 
            width: 100%; 
            z-index: 1;
        }

font-size至2.3em。

（P-特异性）

            #nav p { 
                margin: 1.3em;
                display: inline-block;
                vertical-align: middle;
                float: left;
                color: white;
            }

margin至1.3em

（图特异性）

            #nav img { 
                display: inline-block; 
                height: 2.3em; 
                vertical-align: middle;
                float: right; 
                border-radius: 50%; 
                border: 2px solid white; 
                margin: 1em; 
                opacity: 0.7;
                transition: all 0.2s ease;
            }

height至2.3em，由@MrLister和margin引导至1em。

导航中的元素单独调整大小而不是一起调整

1 个答案: