html - 如何在导航元素的同一行上制作图像+文本

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;
}

这基本上说明了所有<li></li>嵌套在“nav1”类元素中的元素落在同一行(想想字体。)添加填充只是为了视觉目的，但不是必需的。

这是一个working Fiddle .包括对 Font-Awesome 的引用，这是一个很好的图标实用程序 - 如果您正在寻找一个 :)