如何獲取圖片旁邊標題中的導航鏈接（按鈕）

我的導航欄內有我的導航欄。我在角落裏有一個圖像，想要導航鏈接，我在右側做了按鈕，但是在白色框中更高。我在縮小頁面時沒有調整頁眉的大小，但我修復了這個問題，但是現在按鈕不在頁眉中。當我縮小頁面時，它們也不會調整大小。非常感謝幫助。謝謝。網址是http://tolitakeover.com 如何獲取圖片旁邊標題中的導航鏈接（按鈕）

這裏是HTML：

<header> 
    <nav> 
     <ul> 
      <li><a href="contact.html" class="button">Contact</a></li> 
      <li><a href="" class="button">Blog</a></li> 
      <li><a href="events.html" class="button">TBD</a></li>    
      <li><a href="affiliates.html" class="button">Affiliates</a></li> 
      <li><a href="events.html" class="button">Events</a></li> 
     </ul> 
    </nav> 
</header>

這裏是CSS：

nav{ 
    background:url('http://tolitakeover.com/images/toliheader.fw.png'); 
    background-size: 40% 100%; 
    margin-left: 5%; 
    width: 90%; 
    height: 100%; 
    background-repeat: no-repeat; 
    background-color:white; 
} 

nav ul{ 
    padding-top:20%; 
    padding-right:3%; 
    height:60%; 
} 

nav li{ 
    display:inline; 
    float:right; 
    padding-right:1%; 
    padding-top:-50px; 
} 

nav ul li a, 
    nav ul li a:visited{ 
    background-color: white; 
    color: black; 
    display:block; 
} 

nav ul li a:hover{ 
    text-decoration:none; 
    background-color:white; 
    color:black; 
} 

.button { 
    display: inline-block; 
    text-decoration: none; 
    color: black; 
    font-weight: bold; 
    background-color: lightgray; 
    padding: 5px 20px; 
    margin-left:3%; 
    margin-right:3%; 
    font-size: 1.15em; 
    border: 1px solid red; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    text-shadow: 0px -1px 0px rgba(0,0,0,.5); 
    -webkit-box-shadow: 0px 6px 0px lightgray, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px  rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5); 
    -moz-box-shadow: 0px 6px 0px lightgray, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5); 
    box-shadow: 0px 6px 0px lightgray, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);}

來源

2013-02-22 jhalp

你有很多事情。

問題，你從哪裏得到這個樣式表？對於你想要做的事情來說這是個壞消息。我甚至不知道從哪裏開始解釋這...

我建議你從頭開始瓦特/一個乾淨的響應模板，像這樣的：

http://www.initializr.com/

當你說「再「大小」頁面是否意味着它降級到移動設備或平板電腦？你在CSS中沒有這個規則。

另外，在看你的CSS，我建議你把這個讀：http://css-tricks.com/the-difference-between-id-and-class/

來源

2013-02-22 02:40:37 cunningfox

我完全理解，你看到我的後續？ – cunningfox 2013-02-22 03:07:54

點好評！ – cunningfox 2013-02-22 03:17:46

我只提供了CSS的一部分..調整大小到移動設備或平板電腦的CSS我已經在頁面的底部...當我說調整頁面的意思當我拖動網頁，並使其更小我想它使按鈕更小，但他們越來越無所適從......所有這些混亂的CSS來自試圖找出如何得到我想要的東西，我知道大部分應該更容易地完成 – jhalp 2013-02-22 04:19:09

如果你打算走這條路，你會用「clearfix」，而不是從頭部清除導航類？

他應該最好有三個類別，例如：#menu #container clearfix #navigation這也允許他也控制他的標誌，因爲現在它在#nav中。

來源

2013-02-22 03:04:02 cunningfox

如何獲取圖片旁邊標題中的導航鏈接（按鈕）

回答

相關問題