Chrome瀏覽器擴展並排排列圖像鏈接（水平）

我試圖以鏈接方式顯示圖像。在瀏覽器上執行代碼時工作正常。但圖像在加載到擴展模塊時會垂直顯示。我無法弄清楚這一點。任何幫助將不勝感激。Chrome瀏覽器擴展並排排列圖像鏈接（水平）

<html> 
 
<body> 
 
<!-- 
 
<div class="imgContainer"> 
 
<a href="popup.html"> 
 
<img border="0" src="images/a.png" height="30" width="30"> 
 
</a> 
 

 
</div> 
 

 
<div class="imgContainer"> 
 
<a href="popup2.html"> 
 
<img border="0" src="images/b.png" height="30" width="30"> 
 
</a> 
 
</div>--> 
 
<!--<div id="imgContainer"> 
 
<form action="/popup.html"> 
 

 
    <input type="image" src="images/a.png" alt="Submit" width="30" height="30"> 
 
</form> 
 

 

 
<form action="/popup2.html"> 
 

 
    <input type="image" src="images/b.png" alt="Submit" width="30" height="30"> 
 
</form> 
 
</div>--> 
 

 
<div> 
 
<a href="popup.html" > 
 
    <img src="images/a.png" width="30" height="30" /></a> 
 
    </div> 
 
    <div> 
 
    
 
<a href="popup.html"> <img src="images/b.png" width="30" height="30" /></a> 
 
</div> 
 
    <!--<button type="submit"> 
 
<img src="images/a.png" height="30" width="30"/> 
 
</button> 
 
<button type="submit"> 
 
<img src="images/a.png" height="30" width="30"/> 
 
</button>--> 
 
<style> 
 
.imgContainer{ 
 
display: inline-flex; 
 
} 
 
div { 
 
    display: inline-flex; 
 
} 
 
<!--body { 
 
       
 
       overflow-x: hidden; 
 
       font-family: Arial, sans-serif; 
 
       font-size: 12px; 
 
      } 
 
</style> 
 

 
</body> 
 
</html>

extension pic

來源

2017-04-07 Sheetal U

是的！也試過它同樣的問題再次 –

你有沒有嘗試給你的父母的div一些寬度？ –

<html> 
    <body> 
     <div style="display:flex"> 
      <div> 
       <a href="popup.html" ><img src="images/a.png" width="30" height="30" /></a> 
      </div> 
      <div> 
       <a href="popup.html"> <img src="images/b.png" width="30" height="30" /></a> 
      </div> 
     </div> 
    </body> 
</html>

來源

2017-04-07 09:45:09 sneha

謝謝！它運行良好 –

Chrome瀏覽器擴展並排排列圖像鏈接（水平）

回答

相關問題