javascript - 如何在 Google 翻译小部件中的文本旁边添加图像
问题描述
我有一些代码,你可以在这里查看:
https://jsfiddle.net/mc1z2e7n/
正如你所看到的,它是一个带有下拉选项和国旗选项的谷歌翻译小部件,但国旗在上方,文字在国旗上方。
现在我需要在左侧有国家图像标志,在右侧大小的标志旁边有国家文本语言名称,就像这张图片上一样: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;
}```
解决方案
添加display: flex;
到.ct-language__dropdown li
. 像这样:
.ct-language__dropdown li {
background: #222;
padding: 5px;
display: flex;
}
推荐阅读
- ios - 您可以使用第一类函数将变量设置为等于具有默认参数的函数吗?
- python - 如何在 PySimpleGUI 中使用嵌套事件
- pandas - 如何连接具有相似日期时间列的两个 dfs?
- c++11 - 解析方程后崩溃
- android - Android AppBarLayout 预览异常
- json - Jsp 使用带有 JSTL 的 JSON 对象
- typescript - Vscode API-provideTextDocument 不执行一次以上
- python - Keras 中的 Rank 是什么?
- angular - 如何获取对象的所有属性
- ruby - 我可以自定义蜻蜓 image_uid 吗?