Wie zu erzwingen div Breite mit CSS zu strecken, um seinen Inhalt, aber nicht durch seinen Container beschränkt werden?

Question

Ich versuche, ein HTML-"Schaufenster" zu erstellen. Ich denke daran, Elemente wie diese zu verwenden:

<div id="index-showcase-tabs">
    <div id="index-showcase-tabslide">                    
        <div class="index-showcase-tab" id="showcase-tab-1">Item1</div>
        <div class="index-showcase-tab" id="showcase-tab-2">Item2</div>
        ...
        <div class="index-showcase-tab" id="showcase-tab-N">ItemN</div>
    </div>
</div>

Die Elemente des Schaukastens sind nach links verschoben, und ich kenne weder ihre genaue Breite noch die Anzahl der Elemente. Das Problem ist: wenn die kombinierte Breite der Elemente größer ist als der Container ( index-showcase-tabs ), möchte ich nicht, dass sie die Linie unterbrechen (was sie standardmäßig tun). Ich möchte sie in einer Zeile, und ich möchte den Überlauf zu verstecken und dann lassen Sie den Benutzer scrollen sie mit Javascript (nicht durch Scrollbar...).

Wie würde ich das machen?

PS: Es gibt noch nicht viel Css für die Elemente. Ich habe nur dem Schieberegler eine bestimmte Höhe gegeben:

#index-showcase-tabslide
{
    height: 34px;
}

Bearbeiten: Hier können Sie mein Problem sehen .
Bearbeiten2: mehr mit einer Fiedel zu erklären: http://jsfiddle.net/TbSfj/19/

Answer 1

Hierfür können Sie nicht verwenden float: left . Verwenden Sie stattdessen display: inline - Dies hat den gleichen Effekt für das, was Sie erreichen wollen, und es wird nicht auf das übergeordnete Div im DOM-Modell beschränkt.

Answer 2

Sehen Sie sich diese sexy Kontrolle an:

http://jsfiddle.net/SoonDead/U6QdQ/20/

dieser Weg für mein Projekt gemacht, aber ich denke, es tut, was Sie wollen.

Das sind die Tricks:

Da Sie viele Zeichen verwenden, die "Zeilenumbrüche" verursachen können, und selbst die erzwungene Deaktivierung von Zeilenumbrüchen in 1-2 Browsern zu unterschiedlichen Ergebnissen führt, würde ich Ihnen davon abraten.

Machen Sie stattdessen die überlaufende Breite breit genug, um alle Elemente leicht zu halten, so dass es nicht hässlich aussieht, wenn javascript deaktiviert ist.

(Ich weiß, dass Sie mit jquery in Ordnung sind, so dass ich es innerhalb des Beispiels verwenden, auch die outerWidth Eigenschaft in einfachen js hat Bugs in Webkit (neigt dazu, 0 in einigen Fällen sein)).

Sie müssen also die outerWidth() der Elemente summieren und die Breite des Inhaltshalters festlegen, damit Sie scrollLeft verwenden können und nicht overscrollen.

Es gibt keinen anderen Trick, nur eine scrollTo-Funktion, weil die Berechnung von Positionen nicht so trivial ist, wenn Sie neu in Jquery sind und Sie das vielleicht verwenden möchten.