如何将菜单中的文字排除在图标之外？

Question

我有一个带有居中文字的菜单，但我想在两个菜单书签中添加图标。我希望它们在左边，所以我使用了"float: left"但是由于图标，现在文本向右移动了一点。

我只是在照片上显示：

  

- 就像这样：

  

- 现在就是这样：

  

- 我希望如此：

我无法想出以一种简单的方式解决这个问题的任何聪明主意：/

HTML：

<ul>
    <li><a href="ofirmie.php" <?php if ($choosen == 0) {echo ' class="current" ';} ?> > <img src="structure/home.png" class="icon"> Home</a></li>
    <li><a href="oferta.php" <?php if ($choosen == 1) {echo ' class="current" ';} ?> >Oferta</a></li>
    <li><a href="realizacje.php" <?php if ($choosen == 2) {echo ' class="current" ';} ?> >Nasze realizacje</a></li>
    <li><a href="kosze.php" <?php if ($choosen == 3) {echo ' class="current" ';} ?> >Kosze gabionowe</a></li>
    <li><a href="sport.php" <?php if ($choosen == 4) {echo ' class="current" ';} ?> >Sport</a></li>
    <li><a href="kontakt.php" <?php if ($choosen == 5) {echo ' class="current" ';} ?> >Kontakt</a></li>
    <li><a href="ofirmie_en.php" <?php if ($choosen == 6) {echo ' class="current" ';} ?> >English version</a></li>
</ul>

CSS

/*  ---- MENU ---- */

#navi {
    width: 200px;
    float: left;
    padding: 15px 5px 15px 5px;
    margin-bottom: 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    box-shadow: 0px 0px 20px 2px #BFE0EB;
    -webkit-box-shadow: 0px 0px 20px 2px #BFE0EB;
    -moz-box-shadow: 0px 0px 20px 2px #BFE0EB;
}

#navi ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 20px;
    line-height: 2em;
}

#navi li {
    border-bottom: 1px solid #5DBCD2;

}

#navi ul:first-child {
    border-top: 1px solid #5DBCD2;
}

#navi a {
    color: #696969;
    text-decoration: none;
    display: block;
    transition-duration: 0.5s;
}

#navi a:hover, #navi a.current {
    color: white;
    background-color: #319FE8;
}

img.icon{
    float: left;
    width: 24px;
    height: 24px;
}

Answer 1

试一下

img.icon {
    width: 24px;
    height: 24px;
    padding-top: 8px;
    position: absolute;
    left: 18px;
}

Answer 2

试试这个：

#navi li {        
    position:relative;
    padding-left:30px;
}
img.icon {
   position:absolute;
   width: 24px;
   height: 24px;
   top:8px;
   left:5px

}

Answer 3

另一种方法是为父li提供position:relative;，然后您可以为图片提供position:absolute;以及left定位。

请在此处查看示例：https://jsfiddle.net/jm9qgbcx/

根据您提供的代码，您的CSS将如下所示：

#navi li {
    border-bottom: 1px solid #5DBCD2;
    position:relative;
}
img.icon {
    position:absolute;
    left:5px;
}