如何获取图片旁边标题中的导航链接（按钮）

我的导航栏内有我的导航栏。我在角落里有一个图像，想要导航链接，我在右侧做了按钮，但是在白色框中更高。我在缩小页面时没有调整页眉的大小，但我修复了这个问题，但是现在按钮不在页眉中。当我缩小页面时，它们也不会调整大小。非常感谢帮助。谢谢。网址是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

如何获取图片旁边标题中的导航链接（按钮）

回答

相关问题