webshop上的导航问题

Question

我有一个小问题，我已经被困了2-3个小时。我在Tictail (电子商务网站)的设计工作，我想有一个Facebook和Instagram的标志在导航。正如您在下图中所看到的，徽标拒绝与导航中的文本对齐。我可以把商标放在文字上面或下面，这让我抓狂。I just drew the line to show what i mean

    <nav id="main_navigation">
        <ul class="row">
            {{! Highlight "All items" if we are on a list page and no navigation item is selected }}
            <li class="column {{#list_page}}{{#no_current_navigation}}selected{{/no_current_navigation}}{{/list_page}}">
                <a href="{{store_url}}/products">
                    {{#lang}}Startsida{{/lang}}
                </a>
            </li>

            {{#navigation}}
            <li class="column {{#is_current}}selected{{/is_current}}">
                <a href="{{url}}">
                    {{label}}
                </a>
            </li>
            {{/navigation}}

            {{#store_blog_url}}
            <li class="column">
                <a href="{{store_blog_url}}" target="_blank">
                    {{#lang}}Blog{{/lang}}
                </a>
            </li>
            {{/store_blog_url}}
            <li class="column {{#about_page}}selected{{/about_page}}">
                <a href="{{store_url}}/page/about">
                    {{#lang}}Kundtjänst{{/lang}}
                </a>
            <li class="column {{#about_page}}selected{{/about_page}}">
                <a href="{{store_url}}/page/about">
                    {{#lang}}Om oss{{/lang}}
                </a>
            </li>
           <img src="http://i.imgur.com/JvXEXcC.png" alt="{{store_name}}" height="25" width="25" align="right"><img src="http://i.imgur.com/uUiJzIo.png" alt="{{store_name}}" height="25" width="25" align="right">
        </ul>
        {{! By using #is_current within a #navigation block we can find the currently selected navigation item }}
        {{#navigation}}
        {{#is_current}}
        {{! Render the submenu if it has any navigation items }}
        {{#children?}}
        <ul class="child_navigation row">
            {{#children}}
            <li class="column">
                <a href="{{url}}">
                    {{label}}
                </a>
            </li>
            {{/children}}
        </ul>
        {{/children?}}
        {{/is_current}}
        {{/navigation}}

这就是导航代码的样子--换句话说，我在这里除了添加图片和做了一个“align=”right之外，什么也没做。

/* ******************************

NAVIGATION

****************************** */

#main_navigation ul {
    overflow: hidden;
    margin: 0px;
    padding: 0;
    border-top: 1px solid #8f8f8f;
    text-align: left;
    letter-spacing: 2px
}

#main_navigation li {
    margin: 0 0px;
    font-size: 11px;
    line-height: 35px;
    font-weight: ;
    text-transform: uppercase;
    margin-left: -15px;
}

#main_navigation a {
    display: inline-block;
    padding: 15px;
    color: #000;

    margin-right: 25px;

}
#main_navigation .selected a {
    color: #D0D1D0;
}

#main_navigation .child_navigation a {
    color: #908f94;
}
#main_navigation a:hover { 
color: #D0D1D0;>

这就是CSS显示导航的方式。

我希望有人能帮助我，我不知道我是不是有点分散，如果是的话，请让我知道，我会试着解释得更好。

Answer 1

每个li中只有一个超链接，因此：

#main_navigation a {
    display: inline-block;
}

也可能是：

#main_navigation a {
    display: block;
}

li应该排成一行：

#main_navigation li {
  display:inline-block;
}

把你们每个人都放进安莉

更改此设置：

    </li>
   <img src="http://i.imgur.com/JvXEXcC.png" alt="{{store_name}}" 

height="25" width="25" align="right"><img src="http://i.imgur.com/uUiJzIo.png" alt="{{store_name}}" height="25" width="25" align="right">
    </ul>

要这样做：

</li>
   <li><img src="http://i.imgur.com/JvXEXcC.png" alt="{{store_name}}" height="25" width="25" align="right"></li>

   <li><img src="http://i.imgur.com/uUiJzIo.png" alt="{{store_name}}" height="25" width="25" align="right"></li>
</ul>

Answer 2

我在这里做了几件事：

• 创建一个无序列表并内联列表项
• 使行高等于图标高度，然后文本会自动居中图标
• 移除文本链接中的多余填充，这样就不会占用更多空间(请参阅上面的行高点)

​

/* ******************************

NAVIGATION

****************************** */

#main_navigation ul {
    list-style: none;
}

#main_navigation li {
    margin: 0 0px;
    font-size: 11px;
    line-height: 25px;
    font-weight: ;
    text-transform: uppercase;
    float: left;
    display: inilne-block;
}

#main_navigation li img {
  height: 25px;
  width: 25px;
  }

#main_navigation a {
    display: inline-block;
    color: #000;

}
#main_navigation .selected a {
    color: #D0D1D0;
}

#main_navigation .child_navigation a {
    color: #908f94;
}
#main_navigation a:hover { 
color: #D0D1D0;
}

<div id ="main_navigation">
<ul>
            <li class="column {{#about_page}}selected{{/about_page}}">
                <a href="{{store_url}}/page/about">
                    {{#lang}}Om oss{{/lang}}
                </a>
            </li>
  <li>
           <img src="http://i.imgur.com/JvXEXcC.png" alt="{{store_name}}">
    </li>
  <li>
    <img src="http://i.imgur.com/uUiJzIo.png" alt="{{store_name}}">
    </li>
        </ul>
  </div>

​

Answer 3

This is what Nathaniel, they lined up, but the whole website got screwed

This is what happened Carol, it didn't work :(