Gumby将导航与徽标和切换按钮对齐
我一直在弄乱我的代码几个小时试图弄清楚为什么导航没有按下徽标旁边，而且，当我尝试在移动屏幕尺寸中查看网站切换按钮的方式在页面的下方，也需要与徽标一致。
我附上两张照片进一步解释。
继承我的代码：
的index.html：
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" itemscope itemtype="http://schema.org/Product"> <!--<![endif]-->
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Short Bark & Sides Bexleyeath | Dog Grooming</title>
<meta name="description" content="Welcome to Short Bark & Sides, based in Bexleyheath we are one of the few to offer amazing prices and a 5 star service." />
<meta name="keywords" content="dog, grooming, bexleyheath, health, check, short, bark, and, sides, woof, bow, bone" />
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" type="image/ico" href="favicon.ico" />
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<link rel="stylesheet" href="css/gumby.css" media="screen">
<script src="js/libs/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="container">
<div class="mainsection">
<h1 class="four columns logo">
<a href="#">
<img class="left" src="images/logo.jpeg" alt="Logo" gumby-retina />
</a>
</h1>
<div class="navbar row" id="nav2">
<a class="toggle" gumby-trigger="#nav2 > ul" href="#"><i class="icon-menu"></i></a>
<ul class="eight columns">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="apps.html">Our Apps</a></li>
<li><a href="current.html">Live Projects</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<footer>
© Short Bark & Sides 2012-2013, Website Created by <a href="http://danielsheen.co.uk">Daniel Sheen</a>
</footer>
<!-- Grab Google CDN's jQuery, fall back to local if offline -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.9.1.min.js"><\/script>')</script>
<!--
Include gumby.js followed by UI modules.
Or concatenate and minify into a single file
<script src="js/libs/gumby.js"></script>
<script src="js/libs/ui/gumby.retina.js"></script>
<script src="js/libs/ui/gumby.fixed.js"></script>
<script src="js/libs/ui/gumby.skiplink.js"></script>
<script src="js/libs/ui/gumby.toggleswitch.js"></script>
<script src="js/libs/ui/gumby.checkbox.js"></script>
<script src="js/libs/ui/gumby.radiobtn.js"></script>
<script src="js/libs/ui/gumby.tabs.js"></script>
<script src="js/libs/ui/jquery.validation.js"></script>
<script src="js/libs/gumby.init.js"></script>
-->
<script src="js/libs/gumby.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>
还有gumby.css（我只使用导航代码，否则太长了：
/*=====================================================
Navigation (with dropdowns)
======================================================*/
.navbar {
width: 100%;
display: inline;
line-height: 150px;
}
@media only screen and (max-width: 767px) {
.navbar {
position: relative;
border: none;
}
.navbar .column, .navbar .columns {
min-height: 0;
}
}
.navbar.fixed {
top: 0;
left: 0;
z-index: 99999;
}
.navbar a.toggle {
display: none;
}
@media only screen and (max-width: 767px) {
.navbar a.toggle {
top: 5%;
right: 4%;
width: 46px;
position: absolute;
text-align: center;
display: inline-block;
color: #65a3e6;
background: #071e37;
height: 40px;
line-height: 38px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
font-size: 30px;
font-size: 1.875rem;
}
.navbar a.toggle:hover {
background: #0a2a4e;
}
.navbar a.toggle:active, .navbar a.toggle.active {
background: #041220;
}
}
.navbar .logo {
display: inline-block;
margin: 0 2.12766% 0 0;
padding: 0;
height: 60px;
line-height: 58px;
}
.navbar .logo a {
display: block;
padding: 0 0 0 16px;
overflow: hidden;
height: 60px;
line-height: 58px;
}
@media only screen and (max-width: 767px) {
.navbar .logo {
float: left;
display: inline;
}
.navbar .logo a {
padding: 0;
}
.navbar .logo a img {
width: auto;
height: auto;
max-width: 100%;
}
}
.navbar ul {
display: table;
vertical-align: middle;
margin: 0;
float: none;
}
@media only screen and (max-width: 767px) {
.navbar ul {
position: absolute;
display: block;
width: 100% !important;
height: 0;
max-height: 0;
top: 60px;
left: 0;
overflow: hidden;
text-align: center;
background: #041220;
}
.navbar ul.active {
height: auto;
max-height: 600px;
z-index: 999999;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-box-shadow: 0 2px 2px black;
-moz-box-shadow: 0 2px 2px black;
box-shadow: 0 2px 2px black;
}
}
.navbar ul li {
display: table-cell;
text-align: center;
padding-bottom: 0;
margin: 0;
height: 60px;
line-height: 58px;
}
@media only screen and (max-width: 767px) {
.navbar ul li {
display: block;
position: relative;
min-height: 50px;
max-height: 320px;
height: auto;
width: 100%;
border-right: 0 !important;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
}
}
.navbar ul li > a {
display: block;
padding: 0 16px;
white-space: nowrap;
color: #65a3e6;
text-shadow: 0 1px 2px black, 0 1px 0 black;
height: 60px;
line-height: 58px;
font-size: 16px;
font-size: 1rem;
}
.navbar ul li .btn {
border-color: black !important;
}
.navbar ul li.field {
margin-bottom: 0 !important;
margin-right: 0;
}
@media only screen and (max-width: 767px) {
.navbar ul li.field {
padding: 0 20px;
}
}
.navbar ul li.field input.search {
background: black;
border: none;
color: #f2f2f2;
}
.navbar ul li:hover > a {
position: relative;
background: #868d92;
z-index: 1000;
}
.navbar ul li .dropdown {
width: auto;
min-width: 0px;
max-width: 320px;
height: 0;
position: absolute;
background: #fafafa;
overflow: hidden;
z-index: 999;
}
.navbar ul li:hover .dropdown {
min-height: 50px;
max-height: 561px;
overflow: visible;
height: auto;
width: 100%;
padding: 0;
border-top: 1px solid #041220;
-webkit-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
}
@media only screen and (max-width: 767px) {
.navbar ul li .dropdown {
width: 100%;
max-width: 100%;
position: relative;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.navbar ul li:hover .dropdown {
border-bottom: 1px solid #01050a;
}
.navbar ul li:hover .dropdown ul {
position: relative;
top: 0;
background: #020a13;
min-height: 50px;
max-height: 250px;
height: auto;
overflow: scroll;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.navbar ul li:hover .dropdown ul li {
min-height: 50px;
border-bottom: #041220;
}
.navbar ul li:hover .dropdown ul li a {
color: white;
border-bottom: 1px solid #01050a;
}
.navbar ul li:hover .dropdown ul li a:hover {
color: #3794e6;
}
}
@media only screen and (min-width: 768px) and (max-width: 939px) {
.navbar > ul > li > .btn a {
padding: 0 10px 0 10px !important;
}
.navbar ul > li .dropdown ul li:hover .dropdown {
left: -320px;
}
}
如果有人能提供帮助那就太棒了。
1 个答案:
答案 0 :(得分：0)
h1.logo{display:inline-block;}
.navbar ul.eight{display:inline-block;}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？