2 Stimmen

Textumbruch bei Schaltflächen: Problem mit der vertikalen Ausrichtung

Ich musste den Text innerhalb meiner Schaltflächen umbrechen und habe diese Lösung gefunden:

Wie umbringe ich den Text einer html-Schaltfläche mit fester Breite?

Nach Anwendung der Lösung habe ich jedoch festgestellt, dass sich die vertikale Ausrichtung der Schaltflächen ändert. Hier ist der Screenshot:

http://tinyurl.com/88hah7l

Hier ist der Code:

<html>
<head>
    <title>Button Wrap</title>

    <style type="text/css">

        INPUT.StandardButton
        {           
            WIDTH: 87px; 
            HEIGHT: 38px;
            font-size: 10pt; 
            Font-weight: bold;                      
            cursor: pointer;
            FONT-FAMILY: Arial, Verdana;
            COLOR: #0049A5;                                 
        }

    </style>

<head>
<body>

    <input type="button" value="NoWrap" class="StandardButton" />
    <input type="button" value="This is Test 1" class="StandardButton" style="white-space: normal;" />
    <input type="button" value="This is Test 2" class="StandardButton" style="white-space: normal;"  />
    <input type="button" value="This is Test 3" class="StandardButton" style="white-space: normal;" />

</body>
</html>

Haben Sie eine Idee, was die Ursache für die Ausrichtungsänderung ist? Danke!

6voto

ptriek Punkte 8870

Ich bin mir nicht sicher, was die Ursache für diese Fehlausrichtung ist, aber offenbar vertical-align:middle scheint das Problem zu beheben:

http://jsfiddle.net/ptriek/Dr5hM/

0voto

B Woods Punkte 580

Ich bin mir auch nicht sicher, was die Ursache dafür ist, aber valign, die Schaltflächen in eine Tabelle zu setzen und die Breite der Schaltflächen zu verkürzen, sollte das Problem sehr schnell beheben.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X