<button> funktioniert nicht mit display: block;

Wie der Titel sagt, habe ich einen <button> Tag, der die CSS-Anzeige hat: block; was sollte das Element automatisch über die Breite des Containers verteilen? Ich habe andere Tasten auf der Seite, aber sie sind <a> Tags, aber mit der gleichen CSS-Klasse wie der <button> Tag.<button> funktioniert nicht mit display: block;

Die Website finden Sie hier: http://www.cqwebdesign.co.uk/stirlinggrey/, wie Sie jeden Abschnitt als Schaltfläche Link am unteren Rand sehen können. Allerdings ist die eine auf der Suche am unteren Rande der Seite im Abschnitt mit dem Titel: http://codepen.io/anon/pen/zoOQQL

HTML:

CSS

Codepen Version „um Ihren kostenlosen GUIDE UND Angebot zu erhalten“ :

.btn { 
    font-size: 16px; 
    font-family: Open Sans; 
    color: #fff; 
    border: 0; 
    background: #000; 
    padding: 10px; 
    text-decoration: none; 
    text-transform: uppercase; 
    line-height: 1.5; 
    display: block; 
    margin-bottom: 10px; 
}

Dank

Quelle

2016-11-03 Chudz

Sie wollen also die Schaltfläche Senden des Formulars volle Breite? – Lee

Ich möchte, dass es eine maximale Breite und dann volle Breite hat, wenn die Bildschirmgröße unter dieser maximalen Breite liegt. Wenn das Sinn macht? Ich habe den Code hinzugefügt, abzüglich der max-Breite CSS nur zum Beispiel Willen. – Chudz

Dann fügen Sie einfach die CSS-Medienabfrage für die ausgewählte Breite hinzu – weinde

-1

Wenn Ihr Problem ist Damit die Schaltfläche zentriert werden kann, müssen Sie Folgendes tun: beides; um es von den schwebenden Elementen zu befreien.

Elemente auf Blockebene nehmen die volle Breite auf, beeinflussen jedoch nicht die Breite des Elements. Verwenden Sie die Breite:; um dies zu ändern.

Hoffe, das hilft :)

Quelle

2016-11-03 14:26:51 SMoore

<button> funktioniert nicht mit display: block;

Antwort

Verwandte Themen