Css 如何获取图像旁边标题中的导航链接(按钮)

Css 如何获取图像旁边标题中的导航链接(按钮),css,button,header,nav,Css,Button,Header,Nav,我的导航在标题内。我在角落里有一张图片,想要导航链接,我把它做成按钮,在右边,但在白色框的上面。当我缩小页面时,我有一个标题没有调整大小的问题,但是我解决了这个问题,但是现在按钮离开了标题。当我缩小页面时,它们也不会调整大小。非常感谢您的帮助。谢谢网址是 以下是html: <header> <nav> <ul> <li><a href="contact.html" class="button"

我的导航在标题内。我在角落里有一张图片,想要导航链接,我把它做成按钮,在右边,但在白色框的上面。当我缩小页面时,我有一个标题没有调整大小的问题,但是我解决了这个问题,但是现在按钮离开了标题。当我缩小页面时,它们也不会调整大小。非常感谢您的帮助。谢谢网址是

以下是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中没有这方面的规则


另外,看看你的CSS,我建议你读一下:

如果你要走那条路线,你会用“clearfix”来代替,从标题中清除nav类


理想情况下,他应该在上面有三个类,比如:#菜单#容器clearfix#导航这将允许他也可以控制他的徽标,因为现在它在#导航中

我完全理解,你看到我的后续行动了吗?我只提供了css的那部分。。我在页面底部有一个用于调整手机或平板电脑大小的css。。。当我说调整页面大小时,我的意思是当你将网页拖入并使其变小时,我希望它使按钮变小,但它们会变得不协调。。所有这些混乱的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);}