2017-04-07 9 views
0

画像をリンクとして並べて表示しようとしています。ブラウザで実行すると、コードは正常に動作します。しかし、イメージは、エクステンションにロードされたときに垂直に表示されます。 私はこれを理解できません。どんな助けでも大歓迎です。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

+0

はい!同じように試しました 同じ問題を再度 –

+0

あなたの親のdivにいくつかの幅を与えてみましたか? –

答えて

0
<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> 
+0

ありがとう!それは正常に働いた –

関連する問題