左对齐菜单图标答案

【问题标题】：Left align menu icon左对齐菜单图标
【发布时间】：2014-06-04 22:01:18
【问题描述】：

我试图左对齐菜单图标。

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

我的 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 吗？
@zkanoca link

标签： css menu alignment

【解决方案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>

更新

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

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

【讨论】：

谢谢，请参阅link 了解我所指的示例。非常感谢
您在伪元素上添加display:inline-block。在li 内部还有一个a 标签，你必须给他们display:inline-block。像这样 coffeeonline.co.za" style="display:inline-block">HOME
只需将该行放入任何 css 文件中即可。
请记住，在发布这行代码时，您应该更加具体。否则所有<a> 标签都会生效。所以你可以试试 apply li.coffeeonline_bean_icon a{display:inline-block};

【解决方案2】：

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

【讨论】：

【解决方案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;
}

【讨论】：