与图像的响应式导航

本文介绍了与图像的响应式导航的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图在底部做出一个固定位置的响应式导航，每一个里面都有一个不同的图像，像家，功能，任务等等。它在个人电脑和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;
}

decrease

与图像的响应式导航

问题描述

推荐答案