Question

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

Answer 1

你有很多事情要做。

问题，你从哪里得到这个样式表？对于你想要做的事情来说，这是个坏消息。我甚至不知道从哪里开始解释这个......

我建议你从头开始用一个漂亮的干净响应模板，例如：

http://www.initializr.com/

当您说“重新调整大小”页面时，您的意思是它降级为移动设备还是平板电脑？你的CSS中没有这方面的规则。

另外，看看你的CSS，我建议你读一下：http://css-tricks.com/the-difference-between-id-and-class/

Answer 2

如果你要去那条路线，你会使用“clearfix”代替，从标题中清除导航类？

理想情况下，他应该有三个班级，例如：#menu #container clearfix #navigation这样他也可以控制他的徽标，就像现在它在#nav中一样。

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

2 个答案: