Css 左对齐菜单图标

我试图左对齐菜单图标

图标显示在菜单名上方，但我想在菜单名左侧对齐

我的CSS是：

.icon_name_here:before {
content: '';
width: 24px;
height: 24px;
display: inline-block;
float: left;
background: url('http://url_of_icon_here.com') no-repeat left;}

---

如何/如何将图标与菜单名左侧对齐？

对图像和文本使用显示：内联样式您可以像使用变体一样使用此方法。当您想使用精灵时，它会很有帮助

HTML

<div class="your-content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, beatae consequatur dolore doloribus dolorum harum, laboriosam magnam natus, numquam odit officiis quia quisquam suscipit tempora voluptatum. Facere quae quis sed?
</div>

---

如果不发布相关代码，就很难给出准确答案。我试着在你发布的CSS的假设上重新构建，这里我构建了一个演示。请参阅

CSS是这样的。

ul{margin:0;padding:0;}
ul li {padding:4px;}

.icon_name_here:before {
content: '';
width: 24px;
height: 24px;
display: block;
float: left;
padding:4px;
background: url('http://lorempixel.com/24/24/') no-repeat 0 0;}

HTML就是这样。

 <ul>
    <li class="icon_name_here">Item1</li>
    <li>Item2</li>
  </ul>

---

尝试使用行高规则你能发布你的HTML吗？@zkanoca谢谢，请看我所指的示例。非常感谢您在伪元素上添加了

display:inline block

。在

li

内部还有一个

a

标签，您必须给它们

display:inline block

。像这样的“style=”display:inline block“>home只要把那一行放到任何css文件中就行了。记住，在发布这一行代码时，你应该更具体一些。否则所有的

标记都会生效。所以你可以尝试像apply

li.coffeeonline\u bean\u图标a{display:inline block}；

 <ul>
    <li class="icon_name_here">Item1</li>
    <li>Item2</li>
  </ul>

<a href="coffeeonline.co.za"; style="display:inline-block">HOME</a>