Wie reduziert man eine abgerundete div-Größe basierend auf der Elterngröße?

Ich habe mehrere runde Schaltflächen inline von einem übergeordneten Container umschlossen. Der Container hat keine feste Größe. Es wird die gesamte Breite des Bildschirms einnehmen.Wie reduziert man eine abgerundete div-Größe basierend auf der Elterngröße?

.container { 
 
    width: 100%; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    text-align: center; 
 
    background-color: black; 
 
} 
 
.round { 
 
    border-radius: 100%; 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin-right: 2%; 
 
    margin-left: 2%; 
 
}

<div class="container"> 
 
    <button class="round"></button> 
 
    <button class="round"></button> 
 
    <button class="round"></button> 
 
</div>

Die sollte runde Taste eine maximale Breite und Höhe von 50 Pixel. Aber Container reduziert seine Größe und die runden Tasten haben nicht genug Platz, um in einer Zeile angezeigt zu werden, sollte die Tastengröße auf alles in einer Zeile passen.

Ich weiß, dass ich dies problemlos mit Medienabfragen tun kann. Aber das kann chaotisch sein. Gibt es einen saubereren Weg, dies zu erreichen?

Quelle

2016-05-13 user3607282

So etwas mag das sein, wonach Sie suchen. Setzen Sie die width der Tasten, um ein 3. der width ihrer Eltern mit einer max-width von 50px dann fügen Sie ein Floating-Pseudo-Element zu den Tasten mit einem Bit padding, um die Abmessungen der Tasten quadratisch zu halten.

*{box-sizing:border-box;border:0;margin:0;padding:0;} 
 
div{ 
 
    padding:10px 0; 
 
    text-align:center; 
 
    width:100%; 
 
} 
 
button{ 
 
    background:#000; 
 
    border-radius:50%; 
 
    display:inline-block; 
 
    margin:0 2%; 
 
    width:calc(88%/3); 
 
    max-width:50px; 
 
} 
 
button:before{ 
 
    content:""; 
 
    float:left; 
 
    padding:50% 0; 
 
}

<div><button></button><button></button><button></button></div>

Quelle

2016-05-13 11:00:46 Shaggy

Hallo. Wie stelle ich die Höhe ein? In meiner App aus irgendeinem Grund, wenn ich keine Höhe (die gleich der Breite sein soll), die Schaltfläche sieht aus wie ein Oval. Was ist, wenn die Tasten auch Ränder haben? Ex; Rand links: 2%; Rand rechts: 2% – user3607282

Das Pseudo-Element sorgt für die Höhe, sodass es relativ zur Breite skaliert werden kann. Ich habe meine Antwort aktualisiert, um die Ränder anzupassen - Sie ziehen nur die Summe aller Ränder von der 100% Breite, die Sie durch 3 dividieren, ab. – Shaggy

Die Schaltfläche Element scheint padding:1px 6px; einen Standard zu haben. Sie können versuchen, die padding:0; in .round Klasse einzustellen. Dadurch wird die Größe der Schaltfläche 46 * 46.

Da es einen Grenzradius gibt, belegt es 2px * 2px. Wenn Sie die border:none; erhält es die Taste Größe 50 * 50

Quelle

2016-05-13 11:12:43 Pushpendra

Versuchen Sie dies machen:

.container { 
 
    width: 100%; 
 
    text-align: center; 
 
    background-color: black; 
 
} 
 
.round { 
 
    border: medium none; 
 
    border-radius: 100%; 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin-right: 2%; 
 
    margin-left: 2%; 
 
}

<div class="container"> 
 
    <button class="round"></button> 
 
    <button class="round"></button> 
 
    <button class="round"></button> 
 
</div>

Quelle

2016-05-13 11:34:01 Jainam

Wie reduziert man eine abgerundete div-Größe basierend auf der Elterngröße?

Antwort

Verwandte Themen