如何在导航元素中的同一行上制作 img + 文本

Question

我正在尝试在我的网站顶部制作一个菜单栏，它工作起来，看起来不错，图标在左边，文字在右边。我的计划是这样设计它：

(Img) Service   (Img) Free installation    (Img) Free Delivery

（Img）应该是一个不错的图标，而不是:) - 我很难将图标放在同一行上。到目前为止，我做了什么：

.HTML

<nav class="nav1">
    <li><a href="text.html">Login</a></li>
    <li><a href="text.html">Support</a></li>
    <li><a href="text.html">text</a></li>
</nav>
<div id="user_logo">
    <img style="display: inline;" src="user.png" height="18" width="18">            
</div>

user_logo应放置在第一个元素的左侧。

.CSS：

#user_logo {
    margin: 0cm 0cm 0cm 25cm;
    position: relative;
    top: 12px;
}
.nav1 {
    font-family: Helvetica;
    text-align: right;
    color: white;
    position: relative;
    top: 10px;
    font-variant: small-caps;
    display: block  
}

这种方法在视觉上起作用，但是当我使用边距执行此操作时，导航菜单变得不合理，就像您无法单击链接一样。

有没有更简单的方法可以做到这一点，或者我快到了？

Answer 1

你快到了！

为了水平对齐您的导航，您只是缺少了这段 CSS：

/* Missing this piece to have the NAV horizontal */
.nav1 li{
    display: inline;
    padding: 10px;
}

这基本上告诉嵌套在"nav1"类元素中的所有<li></li>元素都属于同一行（想想字体）。添加填充只是出于视觉目的，但不是必需的。

这是一个工作小提琴。包括对Font-Awesome的引用，这对于图标来说是一个很好的实用程序 - 如果你正在寻找一个:)