如何在Google翻译小部件中的文本旁边添加图像

Question

我有一些代码，你可以在这里查一下：

https://jsfiddle.net/mc1z2e7n/

正如您所看到的，它是一个带有下拉选项和国旗选项的google翻译小部件，但是国旗是向上的，文本在国旗上方。

现在，我需要左边有国家图像标志，右边的标志旁边要有国家文本语言名称，就像在这张图片上一样：https://ibb.co/xH3g6B6

以下是完整的代码：

<div class="ct-topbar">
 <div class="container">
   <ul class="list-unstyled list-inline ct-topbar__list">
     <li class="ct-language">Language <i class="fa fa-arrow-down"></i>
       <ul class="list-unstyled ct-language__dropdown">
         <li><a href="#googtrans(en|en)" class="lang-en lang-select" data-lang="en"><img src="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/flags/4x3/af.svg" alt="USA"></a>USASSSSSSS</li>
         <li><a href="#googtrans(en|es)" class="lang-es lang-select" data-lang="es"><img src="https://www.solodev.com/assets/google-translate/flag-mexico.png" alt="MEXICO"></a></li>
         <li><a href="#googtrans(en|fr)" class="lang-es lang-select" data-lang="fr"><img src="https://www.solodev.com/assets/google-translate/flag-france.png" alt="FRANCE"></a></li>
         <li><a href="#googtrans(en|zh-CN)" class="lang-es lang-select" data-lang="zh-CN"><img src="https://www.solodev.com/assets/google-translate/flag-china.png" alt="CHINA"></a></li>
         <li><a href="#googtrans(en|ja)" class="lang-es lang-select" data-lang="ja"><img src="https://www.solodev.com/assets/google-translate/flag-japan.png" alt="JAPAN"></a></li>
       </ul>
     </li>
   </ul>
 </div>
</div>




<script type="text/javascript">
   function googleTranslateElementInit() {
     new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element');
   }

   function triggerHtmlEvent(element, eventName) {
     var event;
     if (document.createEvent) {
       event = document.createEvent('HTMLEvents');
       event.initEvent(eventName, true, true);
       element.dispatchEvent(event);
     } else {
       event = document.createEventObject();
       event.eventType = eventName;
       element.fireEvent('on' + event.eventType, event);
     }
   }

   jQuery('.lang-select').click(function() {
     var theLang = jQuery(this).attr('data-lang');
     jQuery('.goog-te-combo').val(theLang);

     //alert(jQuery(this).attr('href'));
     window.location = jQuery(this).attr('href');
     location.reload();

   });
 </script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

下面是CSS代码：

img {
  width: 30px;
  height: 10px;
}
.lang-select {

  justify-content: center;

}
.ct-topbar {
  text-align: right;
  background: #eee;
}
.ct-topbar__list {
  margin-bottom: 0px;
}
.ct-language__dropdown{
    padding-top: 8px;
    max-height: 0;
    overflow: hidden;
    position: absolute;
    top: 110%;
    left: -3px;
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    width: 100px;
    text-align: center;
    padding-top: 0;
  z-index:200;
}
.ct-language__dropdown li{
    background: #222;
    padding: 5px;
}
.ct-language__dropdown li a{
    display: block;
}
.ct-language__dropdown li:first-child{
    padding-top: 10px;
    border-radius: 3px 3px 0 0;
}
.ct-language__dropdown li:last-child{
    padding-bottom: 10px;
    border-radius: 0 0 3px 3px;
}
.ct-language__dropdown li:hover{
    background: #444;
}
.ct-language__dropdown:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 8px;
    height: 0;
    border: 0 solid transparent;
    border-right-width: 8px;
    border-left-width: 8px;
    border-bottom: 8px solid #222;
}
.ct-language{
    position: relative;
  background: #00aced;
  color: #fff;
  padding: 10px 0;
}
.ct-language:hover .ct-language__dropdown{
    max-height: 200px;
    padding-top: 8px;
}
.list-unstyled {
    padding-left: 0;
    list-style: none;
}```

Answer 1

将display: flex;添加到.ct-language__dropdown li。如下所示：

.ct-language__dropdown li {
  background: #222;
  padding: 5px;
  display: flex;
}

检查它在Jsfiddle上的动作