Buttons untereinander und nicht beim zoom übereinander

[lukasmeier]

Hallo,

ich hab ein paar Buttons designt (http://bit.ly/1RAklHW) und wenn ich jetzt am Handy bin oder größer zoome, dann gehen die Buttons übereinander, wie kann ich das machen, dass die Buttons untereinander gehen?

LG.


Quellcode:

<style type="text/css">
.abc-nav {
text-align: center;

}

.abc-nav {
clear: both;
}

.abc-nav .pages {
border-bottom: 0px none currentColor;
color: #999999 !important;
visibility: hidden;
}

.abc-nav span.current {
background-color: #333333;
border-bottom-color: #333333 !important;
border-bottom-style: solid;
border-bottom-width: 3px;
color: white !important;
font-weight: 700;
}

.abc-nav a, .abc-nav span {
border-bottom-color: #CCCCCC !important;
border-bottom-style: solid;
border-bottom-width: 3px;
color: #666666 !important;
margin: 1px;
padding: 10px 14px;
text-decoration: none;
}

.abc-nav a:hover, .abc-nav span:hover {
background-color: white;
border-bottom-color: #333333 !important;
border-left-color: #666666;
border-right-color: #666666;
border-top-color: #666666;
}

body{
   font-size: 12px;
   font-family: Lato;
   color: #666;
   background-color: #f7f7f7;
     line-height:18px;
}
</style>  <br />
<br />
<br />

<link href='[URL]http://fonts.googleapis.com/css?family=Lato:300[/URL]' rel='stylesheet' type='text/css'>

<div class="abc-nav">
<div class="abc-nav">
  <span class="current">A</span>
  <a class="page larger" href="#">B</a>
  <a class="page larger" href="#">C</a>
  <a class="page larger" href="#">D</a>
  <a class="page larger" href="#">E</a>
  <a class="page larger" href="#">F</a>
  <a class="page larger" href="#">G</a>
  <a class="page larger" href="#">H</a>
  <a class="page larger" href="#">I</a>
  <a class="page larger" href="#">J</a>
  <a class="page larger" href="#">K</a>
  <a class="page larger" href="#">L</a>
  <a class="page larger" href="#">M</a>
  <a class="page larger" href="#">N</a>
  <a class="page larger" href="#">O</a>
  <a class="page larger" href="#">P</a>
  <a class="page larger" href="#">Q</a>
  <a class="page larger" href="#">R</a>
  <a class="page larger" href="#">S</a>
  <a class="page larger" href="#">T</a>
  <a class="page larger" href="#">U</a>
  <a class="page larger" href="#">V</a>
  <a class="page larger" href="#">W</a>
  <a class="page larger" href="#">X</a>
  <a class="page larger" href="#">Y</a>
  <a class="page larger" href="#">Z</a>

</div>
</div>

 

[MrMurphy]

Hallo

Du könntest den a-Elementen ein "display: inline-block;" mit auf den Weg geben.

Gruss

MrMurphy