Question

我有一点问题，我已经被困了2-3个小时了。我正在Tictail（电子商务网站）进行设计工作，我希望在导航中有一个Facebook和Instagram徽标。正如您在下面的图片中看到的那样，徽标拒绝与导航中的文本保持一致。我可以在文本上面或下面有标识，这让我发疯。 I just drew the line to show what i mean

textView

这就是导航代码的样子 - 换句话说，除了添加图片之外，我没有做任何事情，并且制作了一个＆＃34; align =＆＃34; right＆＃34;。

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

这是CSS查找导航的方式。

我希望有人可以帮助我，我不知道我是否有点分散，如果是，请告诉我，我会尝试更好地解释。

Answer 1

每个li中只有一个超链接：

#main_navigation a {
    display: inline-block;
}

也可能只是：

#main_navigation a {
    display: block;
}

李应该排队：

#main_navigation li {
  display:inline-block;
}

将每个人放入li

改变这个：

    </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

2.6

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

网上商店导航问题

3 个答案: