私は、下部に固定位置を持つレスポンシブナビゲーションを作成しようとしています。ホーム、機能、タスクなどのように、すべてのliに異なる画像があります..! PCとiPadでは問題ありませんが、携帯電話では画像のサイズが小さくなりませんが、2行になりません。常に一行に収まるようにしたいのですが、モバイルでは画像サイズをliで縮小して収まるようにします。また、ナビゲーション要素が中央に配置されていない理由もわかりません。多くの場合、右側にあります。
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;
}