transform: rotate erstellen Sie unerwünschte Leerzeichen

Ich habe eine Seite, die verwendet transform: rotate, aber lässt einen großen Leerraum, wobei das element gewesen wäre, wäre es nicht gedreht. Ich habe gefunden ein paar andere Leute fragt eine ähnliche Frage, aber ich habe nicht in der Lage war zu passen die Antworten lösen mein gegenwärtiges problem. Ich denke, dass Sie wahrscheinlich enthalten die richtige Lösung, und ich bin einfach nur ein Fehler, wenn man versucht, es zu meinem Fall:

Css drehen div erzeugt einen weißen Rand oben

White space um css3-Skala

Hier ein jsfiddle, Ihnen zu zeigen, das problem:

https://jsfiddle.net/jonotrain/L2h12qm5/

Wie Sie sehen können, es gibt eine Menge der weißen Raum unter den gedrehten text. Ich möchte, dass der text am Ende in der gleichen Stelle, ohne dass Leerzeichen.

Hier ist der HTML:

<BODY>
<DIV class = "titles" id = "sideways" style = "position: relative;">";
<p class = "volumes" id="volumes"></p>";
<ul class = "titles">
    <li>ale.imzqzfojdobcggydk</li>
<li>mouwl sxjjwrk,osbl</li>
<li>cqjpjfeqhgovtto</li> 
....
  </ul>
</DIV>
</BODY>

Und CSS:

 div.titles {
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    display: inline-block;
    right: 0;
    left: 367px;
    height: 260px;
    top: -4px;
}

p.volumes {
padding: 0;
font-family: "Arial Narrow";
line-height: 220%;
font-size: 10;
}
ul.titles {

list-style-type: none;
text-align: center;
}
ul.titles li {

padding: 8px;
font-family:"Subway", "Courier", "serif";
font-size:11px;
color: #000000;
}
  • Nicht sicher, was Sie Fragen.
  • Ich denke, Sie sollten spielen ein wenig mehr mit transform und transform-origin so können Sie Ihre erwarteten Ergebnisse, die ich geändert Geige so können Sie sehen, was ich bin sprechen, ich bin mir nicht sicher, ob das ist, was Sie tun wollte, bin ich also nicht setzen es als Antwort. Weitere Informationen erhalten Sie von transformieren und transform-origin
  • Ich Frage, wie kann ich diese gleiche rotation, ohne hinter dem weißen Raum an der Unterseite. Ich warf einen Blick auf Ihre Bearbeitungen @valarauko, aber es scheint, dass der weiße Raum ist immer noch da.
  • Sie können loszuwerden, den weißen Raum, indem Sie Ihre Titel mit div eine absolute position, es hat nicht geklappt mit der relativen position, weil der container noch die Objekte die Höhe festgelegt. Hier ist die Geige. Ich denke, das ist, was Sie wollen
InformationsquelleAutor Jonathan Basile | 2015-04-02
  1. 4

    Durch das gedrehte element 'block' eher als 'inline-block', der Raum unten verschwindet.

    div.titles {
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    display: block;
    right: 0;
    left: 367px;
    height: 260px;
    top: -4px;
}

    Wie Sie sehen können in dieser bearbeitet fiddle, neuen text Hinzugefügt fällt rechts unten gedrehte text ohne eine Lücke.

    InformationsquelleAutor lycorine
  2. 1

    Neue Lösung Für Sie, Wenn Sie die oben CSS nicht für Sie arbeiten, so verwenden Sie diesen trick. Hinzufügen eines Span-tag im TD-tag. Sie können hinzufügen, margin-left und rechts.

    <td>

<span style="float: left; 
transform: rotate(-90deg); 
white-space: nowrap; 
width: 30px;">
VACATE ORDER
</span>

</td>
    InformationsquelleAutor Manzoor Ahmad
  3. 0

    verwenden Sie diese CSS-Eigenschaft::::::

    .div.titles {
    float: left;
    margin-left: 20px;
    transform: rotate(90deg);
    transform-origin: left top 0;
    white-space: nowrap;
    width: 20px;
}
    InformationsquelleAutor Manzoor Ahmad
Schreibe einen Kommentar