CSS Schwimmer nicht äußerte Blockelement halte Größe richtig

Ich habe den folgenden HTML-Code:CSS Schwimmer nicht äußerte Blockelement halte Größe richtig

<ul class="blogEntry"> 
    <li class="title section"> 
     <span><asp:Literal ID="litTitle" runat="server" /></span> 
     <span class="date"><asp:Literal ID="litDate" runat="server" Text="10/1/1000" /></span> 
    </li> 
    <li class="body section"><asp:Literal ID="litBody" runat="server" /></li> 
    <li class="tags section"> 
     <ul class="tags"> 
      <li class="tag">Tag 1</li> 
      <li class="tag">Tag 2</li> 
      <li class="tag">Tag 3</li> 
     </ul> 
    </li> 
</ul>

und den folgenden CSS-Code:

ul.blogEntry 
{ 
    border: 1px solid black; 
    border-bottom: 0px; 
    padding: 0px; 
} 
ul.blogEntry li.section, ul.blogEntry li.lastsection 
{ 
    list-style: none; 
} 
ul.blogEntry li.title 
{ 
    background-color: #67A7FF; 
    font-size: 14px; 
    font-weight: bold; 
} 
ul.blogEntry li.title span 
{ 
    display: inline; 
} 
ul.blogEntry li.title.section span.date 
{ 
    float: right; 
} 
ul.blogEntry li.section 
{ 
    padding: 4px; 
    border-bottom: 1px solid black; 
}

Wie ist, wird das Datum zu einem Rückgang neue Linie und schweben nach rechts. Wenn ich das ul.blogEntry li.title span CSS ändere und Schwimmer hinzufüge: links; Die Höhe des äußeren LI-Elements wird kleiner und der untere Rand schneidet den Text der Spannen direkt ab. Rat?

Quelle

2009-07-23 Spencer Ruport

(msg): Hallo Spencer, ich denke du weißt was du meinst. Erstens, das war ein Kommunikationswiki. Zweitens, das ist meine Meinung. Wenn Sie jemandem eine Aufgabe geben (wie schreiben Sie Ajax mit reinem Javascript) und er kommt mit der Antwort "jquery verwenden" zurück, bedeutet das, dass er diese Aufgabe nicht bewältigen kann. Ich habe keine Beleidigung gemeint. Einen schönen Tag noch. –

Bitte fügen Sie keine keine Elemente für das Clearing. Elemente, die nur ein spezifisches Styling ermöglichen, brechen die Semantik und die Trennung von Belangen signifikant.

Die einfache Antwort ist overflow:auto; zum Containerelement hinzufügen (dh li.title), aber es gibt auch andere Möglichkeiten:

Blöcke Clearing sind böse.

Quelle

2009-07-23 06:05:46 annakata

Ja, das vermeide ich definitiv. Aber die Überlaufeigenschaft hat funktioniert. Ich war unter dem Eindruck, dass Auto der Standard war. Vielen Dank. –

Nein, "sichtbar" ist die Standardeinstellung. Netter Avatar übrigens;) – annakata

Ah Ich habe gerade diesen Kommentar gesehen. Ich denke du bist die erste Person, die es bemerkt. :) –

Versuch:

.section {min-height: 10px;}

, die Ihren Schwimmer für all Abschnitt Klasse in IE7 löschen sollten und 8. Sie können versuchen, schwimmend das Element über das Datum, ob das funktioniert, um zu sehen links.

auch, wenn etwas schwimmen, sollten Sie setzen in der Regel die Breite

Quelle

2009-07-23 05:59:10 Jason

Nun, im Grunde möchte ich nur eine nach rechts und eine nach links ausrichten. Verwende ich die falschen Eigenschaften? –

Nein, Sie sind nicht, aber Sie müssen den Layout-Effekt auf dem Elternelement kompensieren. Beachten Sie, dass Min-Höhe Ihnen in annakata

CSS Schwimmer nicht äußerte Blockelement halte Größe richtig

Antwort

Verwandte Themen