導航中的元素單獨調整大小而不是一起調整

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作爲引導。