Div Block hat nicht freien Platz für Tasten

Question

Div Block hat keine freie Speicherplatz für Schaltflächen in einer Zeile

Ich habe einen Block mit Tasten, die Tasten gut aussehen, wenn 1920x1080 Pixel aber wie für adaptive Tasten machen 1080x720 und mobile Plattformen? Adaptive Tasten funktionieren in Wordpress?

.main_button_left { 
 
    color: white; 
 
    text-decoration: none; 
 
    padding: 12px 0px 15px 0px; 
 
    border-radius: 0px 0px 0px 15px; 
 
    background: #ff6500; 
 
    transition: 1s; 
 
    border-color: #ff6500; 
 
    font-size: 15px; 
 
    width: 150px; 
 
} 
 

 
.main_button { 
 
    color: white; 
 
    text-decoration: none; 
 
    padding: 12px 0px 15px 0px; 
 
    border-radius: 3px; 
 
    background: #ff6500; 
 
    transition: 1s; 
 
    border-color: #ff6500; 
 
    font-size: 15px; 
 
    width: 150px; 
 
} 
 

 
button.main_button:hover, 
 
button.main_button_right:hover, 
 
button.main_button_left:hover { 
 
    background: #ffcd07; 
 
    border-color: #ffcd07; 
 
} 
 

 
.main_button_right { 
 
    color: white; 
 
    text-decoration: none; 
 
    padding: 12px 0px 15px 0px; 
 
    border-radius: 3px; 
 
    background: #ff6500; 
 
    transition: 1s; 
 
    border-color: #ff6500; 
 
    border-bottom-right-radius: 10px; 
 
    font-size: 15px; 
 
    width: 150px; 
 
}

<section class="slider"> 
 
    <div class="main_panel"> 
 
    <button class="main_button_left">Button1</button> 
 
    <button class="main_button">Button2</button> 
 
    <button class="main_button">Button3</button> 
 
    <button class="main_button">Button4</button> 
 
    <button class="main_button">Button5</button> 
 
    <button class="main_button">Button6</button> 
 
    <button class="main_button">Button7</button> 
 
    <button class="main_button_right">Button8</button> 
 
    </div> 
 
</section>

Answer 1

Sie können eine Flexbox für die Schaltflächen verwenden und eine Mindestbreite festlegen. Bei Medienanfragen können Sie diese je nach Ihren Anforderungen anders darstellen. Stellen Sie die Mindestbreite beim Stapeln auf 100% ein.

button { 
 
    color: white; 
 
    background: #ff6500; 
 
    border-color: #ff6500; 
 
    font-size: 15px; 
 
    text-decoration: none; 
 
    padding: 12px 0px 15px 0px; 
 
    min-width: 70px; 
 
    transition: 1s; 
 
    width: 12%; 
 
    border-radius: 3px; 
 
} 
 

 
.main_button_left { 
 
    border-radius: 0px 0px 0px 15px; 
 
} 
 

 
button:hover { 
 
    background: #ffcd07; 
 
    border-color: #ffcd07; 
 
} 
 

 
.main_button_right { 
 
    border-bottom-right-radius: 10px; 
 
} 
 

 
.main_panel { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
}

<section class="slider"> 
 
    <div class="main_panel"> 
 
    <button class="main_button_left">Button1</button> 
 
    <button class="main_button">Button2</button> 
 
    <button class="main_button">Button3</button> 
 
    <button class="main_button">Button4</button> 
 
    <button class="main_button">Button5</button> 
 
    <button class="main_button">Button6</button> 
 
    <button class="main_button">Button7</button> 
 
    <button class="main_button_right">Button8</button> 
 
    </div> 
 
</section>

Answer 2

Auf kleinen Bildschirm Sie Tasten vertikal stapeln kann, oder ein Menü verstecken und eine Schaltfläche erstellen, das ist Tasten zeigen.