網上商店導航問題

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 =」右」

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

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

只有一個在每個L1如此超鏈接：

#main_navigation a { 
    display: inline-block; 
} 

可能也只是爲：

#main_navigation a { 
    display: block; 
} 

李應排隊：

#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 :(