与图像的响应式导航 [英] Responsive Navigation with images
问题描述
我试图在底部做出一个固定位置的响应式导航，每一个里面都有一个不同的图像，像家，功能，任务等等。它在个人电脑和ipad上都很好，但是在手机上，它并没有减少li中图像的大小，而是将它们分成两行，我不想要。我希望他们始终保持在一条线上，但在移动时减少李的图像大小，以便它们适合。我也不知道为什么导航元素不是居中对齐，他们很多都是正确的。
I am trying to make a responsive navigation with fixed position in bottom, every li have a different image in it like home, features, tasks and so on..! it is fine on PC and ipad but on mobile phone it does not decrease the size of images in li but brings them into two lines which I dont want. I want them to always stay in one line but on mobile decrease the images size in li so they fit. I also dont know why nav elements are not center aligned, they are alot at right.
HTML
<body class="body">
<div class="top_bg">
<div class="logo"><a href="http://www.onbreath.com"><img src="images/logo.png" alt="Breath" border="0"></a></div>
<a href="">
<div class="options">Options</div>
</a>
</div>
All page content comes here
<div class="bottom_bar">
<nav><ul>
<li><a href="#"><img src="images/home_r.png" ></a></li>
<li><a href="#"><img src="images/tasks.png" ></a></li>
<li><a href="#"><img src="images/checks.png" ></a></li>
<li><a href="#"><img src="images/messages.png" ></a></li>
<li><a href="#"><img src="images/toplist.png" ></a></li>
</ul></nav>
</div>
</body>
</html>
CSS
body {
background-color: #b00000;
margin: 0px;
height: auto;
}
img, embed, object, video {
max-width:100%;
height:auto;
}
.body {
background-image: url(../images/bg.jpg);
width: 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
clear: both;
min-height: 100%;
padding-bottom: 180px;
height: auto;
}
.bottom_bar {
background-image: url(../images/bottombar_bg.png);
background-repeat: repeat-x;
bottom: 0px;
z-index: 1;
clear: both;
background-color: #af0007;
height: 88px;
width: 100%;
position: fixed;
}
.bottom_bar_buttons {
margin-right: auto;
margin-left: auto;
margin-top: 15px;
width: 70px;
height: 60px;
}
.bottom_bar nav {
text-align: center;
margin-top: 0;
margin-right: auto;
margin-left: auto;
height: 88px;
}
.bottom_bar nav ul {
list-style: none;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
margin-top: 0px;
}
.bottom_bar nav ul li {
display: inline;
margin: auto;
}
.bottom_bar nav a:link, .bottom_bar nav a:visited {
color: #fff;
display: inline-block;
text-decoration: none;
margin-right: 3%;
margin-left: 0%;
margin-top: 15px;
margin-bottom: 0px;
}
.bottom_bar nav a:hover, .bottom_bar nav a:active,
.bottom_bar nav .active a:link, .bottom_bar nav .active a:visited {
color: #fff;
text-shadow: none !important;
}
.bottom_bar nav li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
推荐答案
的屏幕（即PC，手机，iPad等）您要使用 @media screen 请参阅链接
For better display in all type of screens (ie. pc, mobile, ipad, etc) you want to use @media screen please refer the link
因为网站不适合所有的屏幕，你想设置差异。属性差异。屏幕。
Because web-site will not fit to all screens, you want to set diff. properties for diff. screens.
这篇关于与图像的响应式导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
