split.s: relative Breite von <button>

SELF-Forum

relative Breite von <button>

split.s
– Informationen zu den Bewertungsregeln

Gibts irgendeine Möglichkeit, dass sich die Breite des <button> -tags der Breite des parent-blocks anpasst wie das bei display:block normalerweise der Fall ist?

Habe es schon mit width:100% probiert, aber irgendwie überlappt das dann an der rechten Seite.
Ich verstehe nicht, wieso ich das nicht mit display:block hinbekommen kann weil ich dadurch ja die vorherige display-Einstellung (vermutlich inline-block) überschreibe.

Wäre für einen Tipp sehr dankbar.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. relative Breite von <button>

    suit Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Wäre für einen Tipp sehr dankbar.

    Entschuldige meine Fachsprache:

    Hä?

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. relative Breite von <button>

      split.s
      – Informationen zu den Bewertungsregeln

      Du willst, dass ein <button> so breit ist, wie der Kontainer in dem er sich befindet. Wie machst du das? display:block funktioniert nicht.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. relative Breite von <button>

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@split.s:

    nuqneH

    Habe es schon mit width:100% probiert, aber irgendwie überlappt das dann an der rechten Seite.

    Lass mich suits Nachfrage spezifizieren: Häh?

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. relative Breite von <button>

      MudGuard Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hi,

      Habe es schon mit width:100% probiert, aber irgendwie überlappt das dann an der rechten Seite.

      Lass mich suits Nachfrage spezifizieren: Häh?

      Ist doch ganz klar: der Button hat width:100%, dazu noch die bei Button übliche Border (+evtl. padding) - und mit dem default für overflow (visible) ergibt sich logischerweise das Überhängen rechts.

      Warum spit.s sich darüber allerdings wundert, versteh ich auch nicht - ist ja alles klar spezifiziert.

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      O o ostern ...
      Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. relative Breite von <button>

        molily
        – Informationen zu den Bewertungsregeln

        Ist doch ganz klar: der Button hat width:100%, dazu noch die bei Button übliche Border (+evtl. padding) - und mit dem default für overflow (visible) ergibt sich logischerweise das Überhängen rechts.

        Das kann ich in keinem Browser bestätigen. Standard schein zu sein, dass für button und input so etwas wie box-sizing: border-box gilt. (Wenn nicht, wäre das die Lösung. Mit Vendor-Prefixes, sofern nötig.) Formularfelder sind ja zumindest gemäß CSS 2.1 replaced inline elements, auf die das konventionelle Box-Modell nicht zutrifft.

        <!DOCTYPE html>  
<style>  
[code lang=css]div { width: 400px; background: red; padding: 20px 0; }  
button, input { width: 100%; padding: 10px; border: 10px solid blue; font: 16px sans-serif; }

        </style>
        <div>
        <button type="button">Foo</button>
        <input type="button" value="Foo">
        </div>[/code]

        Hier hängt in keinem Browser etwas über (IE < 8 habe ich allerdings nicht getestet).

        Kontrolle auch so möglich:

        <script>  
[code lang=javascript]alert(document.getElementsByTagName('button')[0].offsetWidth);

        </script>[/code]

        Ergibt 400, nicht 440.

        Mathias

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln