Css 无法正确显示我的项目符号列表

我正在使用一个小应用程序，其中包括一个国家和国旗的项目符号列表。该列表最初使用常规的项目符号图标，但我也希望包含标志。应用程序中有两个区域会影响列表，第一个是index.php文件（我在其中更改了代码以选择标志图像）。该文件的全部内容如下：

jQuery（文档）.ready（函数（$）{
$（“li”）。单击（函数（）{
parent.addLanguageCode（）；
变量b=$（'.arrowchat_trayclick'）.attr（'id'）；
b=b.substr（'30'）；
var info=$（this.attr（'id'）；
如果（信息！=b）{
$（'.goog te combo'，top.document）.val（info）；
parent.changeLanguage（）；
$（'#箭头聊天应用程序\按钮\'+b）。单击（）；
$（“#箭头聊天"应用程序"按钮"+b+'img'）.attr（'src'，“{$base_url}图像/'+info+'.png'）；
$（“#arrowchat_app_link_'+b+'img'）.attr（'src'，“{$base_url}images/'+info+'.png'）；
$.cookie（'箭头聊天\语言\应用程序'，信息）；
}
});
})；

html，
主体{}
.小{
字体大小：粗体；
}
.翻译{
浮动：左；
宽度：100%；
保证金：0；
填充：0；
列表样式：无；
}
.翻译_ul li{
文本对齐：左对齐；
浮动：左；
宽度：102px；
保证金：0；
高度：20px；
背景位置：0-1px；
背景重复：无重复；
填充：01.5em；
光标：指针；
}
.translate_容器{
背景色：#fffff；
颜色：#333；
字体大小：正常；
字体系列：“lucida grande”、tahoma、verdana、arial、无衬线字体；
字体大小：11px；
填充：15px 10px；
垫底：0px；
文本对齐：左对齐；
}
.翻译容器a{
颜色：11648F；
}
.翻译{
显示：无；
}

南非荷兰语
阿尔巴尼亚语
阿拉伯语
白俄罗斯语
保加利亚语
加泰罗尼亚语
中文（简体）
中文（繁体）
克罗地亚语
捷克语
丹麦语
荷兰语
英语
爱沙尼亚语
菲律宾语
芬兰语
法语
加利西亚人
德语
希腊语
海地克里奥尔语
希伯来语
印度语
匈牙利语
冰岛语
印尼语
爱尔兰语
意大利语
日语
韩语
拉脱维亚语
立陶宛语
马其顿语
马来语
马耳他语
挪威语
波斯语
波兰语
葡萄牙语
罗马尼亚语
俄语
塞尔维亚语
斯洛伐克语
斯洛文尼亚语
西班牙语
斯瓦希里语
瑞典语
泰国语
土耳其语
乌克兰语
越南语
威尔士语
意第绪语

{$translate_语言[0]}

。翻译{
浮动：左；
宽度：100%；
保证金：0；
填充：0；//好的，这就是我解决问题的方法，请在此处输入：

首先，忘了浮点数吧，它们几乎被弃用了。我从你的css中删除了它们。只有在少数情况下是必要的，而不是为了这个

其次，在index.html中，我将每个国家的名称都包装在一个
中，这样我就可以在css中更轻松地处理它们

第三，检查css文件，首先我清理了
。translate_ul li
填充并将其设置为0。然后我为
元素内的图像以及
元素创建了一个处理程序。然后我在这两个元素中使用了属性
display:inline block
，这告诉导航器它们是对齐的在另一个元素旁边，属性：
vertical align:middle
，表示我希望它们在彼此的中间对齐。最后，为了美观起见，我在
元素的左侧添加了一个小边距

.translate_ul li {
  text-align: left;
  width: auto;
  margin: 0;
  height: 20px;
  background-position: 0 -1px;
  background-repeat: no-repeat;
  padding: 0 0 0 0;
  cursor: pointer;
}

.translate_ul li p{
  display:inline-block;
  vertical-align:middle;
  margin-left:5px;
}
.translate_ul li img{
  display:inline-block;
  vertical-align:middle;
  width:16px;
}

我希望这对你有用。
也许你应该用假图像设置一个较短且有效的代码段。你能将你的代码上传到类似plunkr的东西上吗？我想看看子弹是如何生成的，你是否尝试过在de“ul”中添加左填充元素？嗨，你能解释一下你的意思吗？嗨，Asaf，我尝试了这个建议，但什么也没发生。然后我改变了：{text align:right；float:left；width:170px；margin:0；height:33px；}这将国家名称向右移动，但它们与国旗不对齐-它们似乎在下面，但现在向右移动我的意思是我尝试向左填充：15px；和其他值将您的代码添加到plunker并发布，以便y可以现场查看这是原始的和以前的样子：这是您的意思吗？Asaf，非常感谢！它现在起作用了。我仍然在图片左边有圆点，但我可以接受它们。现在我的列表排列得很好！
.translate_ul li {
  text-align: left;
  width: auto;
  margin: 0;
  height: 20px;
  background-position: 0 -1px;
  background-repeat: no-repeat;
  padding: 0 0 0 0;
  cursor: pointer;
}

.translate_ul li p{
  display:inline-block;
  vertical-align:middle;
  margin-left:5px;
}
.translate_ul li img{
  display:inline-block;
  vertical-align:middle;
  width:16px;
}