左对齐菜单图标

Question

我试图左对齐一个菜单图标。

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

我拥有的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;}

如何/如何对齐菜单名称左侧的图标？

Answer 1

如果没有发布相关代码，很难给出确切答案。我试图重新建立你发布的CSS的假设，在这里我构建了一个演示。请参阅 DEMO 。

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>

<强>更新

您必须在display:inline-block标记上添加<a>。检查上传的图片。

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

Answer 2

使用display：图像和文本的内联样式

Answer 3

您可以像变种一样使用此方法。当你想使用精灵

时，它会很有帮助

<强> 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

.your-content {
    position: relative;
    padding: 0 0 0 10px; /*space between block edge and displaying of your text*/
}
.your-content:after {
    content:'';
    position: absolute;
    top: 0px; /*position of your icon*/
    left: 0px; /*position of your icon*/
    width: px; /*width of your icon*/
    height: px; /*height of your icon*/
    background: url(img/your-icon-bg.png)  no-repeat;
}