Ich versuche herauszufinden, ob es möglich ist, eine Schaltflächengruppe auf -45 Grad zu drehen. Ich habe ein Beispiel auf JSBin gemacht. Mein Problem ist der Abstand zwischen den gedrehten Tasten. Irgendeine Idee, wie man sie zusammen gruppiert?JQuery-Schaltflächen auf -45 Grad ohne Leerzeichen drehen
Wie ist this?
Ich hielt alles gleich, außer Ihrem CSS-Code:
.rotate {
margin: 20px -33px 20px 0 !important;
height: 24px !important;
-webkit-transform: rotate(-45deg);
/* Chrome, Safari 3.1+ */
-moz-transform: rotate(-45deg);
/* Firefox 3.5-15 */
-ms-transform: rotate(-45deg);
/* IE 9 */
-o-transform: rotate(-45deg);
/* Opera 10.50-12.00 */
transform: rotate(-45deg);
/* Firefox 16+, IE 10+, Opera 12.10+ */
}
Styles aus dem Blatt jQuery UI automatisch wurden eine Marge auf Tasten einstellen, so fügte ich jeweils eine Marge von -33 auf der rechten Seite von Taste. Ich musste die jQuery UI-Stile mit !important überschreiben. Die Tasten würden wieder auseinander fallen, wenn Faktoren wie die Schriftgröße der Tasten geändert würden, also habe ich height: 24px !important verwendet, um das zu überschreiben.
thx - schön, aber es schwebt nicht so reibungslos zusammen, auch wenn du Rand rechts verwendest: -33px! (das ist für mich das beste Ansehen). Sie können sehen, dass das Futter manchmal nicht perfekt ist. – Thomas
Hm, du hast recht. Es ist ein paar Pixel aus. Ich konnte keinen anderen jQuery UI-Stil finden, der dazu führen würde, dass die Schaltflächen unterschiedliche Größen haben. Ich denke, es muss mit dem Text innerhalb der Schaltflächen zu tun haben - wenn Sie den "Mathe" -Text usw. ändern, sehen Sie, dass die Schaltflächen in verschiedenen Größen dargestellt werden. :( – SpyderScript
Nicht möglich mit CSS allein. Du brauchst JS, um die Breite jeder Taste zu berechnen und dann einen negativen Rand auf deine Elemente anzuwenden –