CSS - <a> Elemente übereinander gestapelt, nachdem

Question

Ändern der Größe Ich habe Tasten mit diesen Eigenschaften:

background: #c6cdf2; 
border: 1px solid #8896e4; 
border-radius: 3px; 
padding: 6px 10px 3px 10px; 

Sobald die Seite passt die Größe sie nicht über die Polster scheinen und in Einanderstapeln beginnen zu kümmern.

Gibt es eine Möglichkeit automatisch den richtigen Abstand zwischen den Grenzen zu berechnen? Ich möchte keinen festen Betrag für die Marge festlegen.

Answer 1

können Sie flexbox verwenden. keine Notwendigkeit für Medienabfragen oder zusätzlichen Code. vereinfachen Sie es.

div { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
a { 
 
    background: #c6cdf2; 
 
    border: 1px solid #8896e4; 
 
    border-radius: 3px; 
 
    padding: 6px 10px 3px; 
 
    margin: 10px /* whatever you want here */ 
 
}

<div> 
 
    <a href="#">long long long text</a> 
 
    <a href="#">long long text demo</a> 
 
    <a href="#">short text</a> 
 
</div>

Answer 2

Flex-Eigenschaft nicht IE9, IE8 so bessere Verwendung von Medien Abfragen unterstützen.

@media screen and (max-width: 380px) { 

      .yourSelector { 

      display: block; 
      width: 100%; 

      } 
    } 

Und einfügen margin:0.5% UND box-sizing: border-box.

Voll Code:

.b { 
 

 
    background: #c6cdf2; 
 
    border: 1px solid #8896e4; 
 
    border-radius: 3px; 
 
    padding: 6px 10px 3px 10px; 
 
    margin: 0.5%; 
 
    box-sizing: border-box; 
 
} 
 

 
@media screen and (max-width: 380px) { 
 

 
     .b { 
 
      
 
      display: block; 
 
      width: 100%; 
 
      } 
 

 
}

<a href="#" class="b">Button1 </button> 
 
<a href="#" class="b">Button2 </button> 
 
<a href="#" class="b">Button3 </button> 
 
<a href="#" class="b">Button4 </button> 
 
<a href="#" class="b">Button5 </button>

Answer 3

können Sie versuchen, zwei mehr Stil Eigenschaften hinzufügen:

float: left; clear: both;

Hoffnung, dass helfen würde.

Answer 4

Das Problem ist, dass Ihre Elemente sind inline (display: inline), so können Sie Polsterungen mit line-height-Eigenschaft machen, oder sie blockieren machen, oder inline-block Polsterungen zu verwenden