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

Question

我在导航栏方面遇到的最大问题之一是，无论何时尝试将 Logo 与标题放在一起，我总是发现图像会自动调整到比文本小得多的大小。

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

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

(特定于 Img)

            #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。