IE6浮动撑开了父元素,怎么破?_html/css_WEB-ITnose
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Examples</title><style type="text/css">*{margin: 0;padding: 0;}.box{ padding: 10px 20px; background: red; color: #fff; text-decoration: none; float: left;}.ico{ width: 20px; height: 20px; background: blue; float: right;}</style></head><body><a href="" class="box">怎么破<i class="ico"></i></a> </body></html>在IE 6 7下撑开了, 其他正常 不想让它撑开. a 宽度不固定 i 在右边.
怎么破?
求解?
可以给文字外再包一层 可以解决 ,如果是这种结构的话有没有其他方法可以解决
回复讨论(解决方案)
你的父元素，非得用float吗？
a标签
display:block
试试看
a标签
display:block
试试看
不行
加个宽度。
demo here.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Examples</title> <style type="text/css"> *{margin: 0;padding: 0;} .box{ padding: 10px 20px; background: red; color: #fff; text-decoration: none; float: left; width:78px; } .ico{ width: 20px; height: 20px; background: blue; float: right; } .txt{ float:left;} </style></head><body><a href="" class="box"><i class="txt">怎么破</i><i class="ico"></i></a></body></html>
.ico{ width: 20px; height: 20px; background: blue; display:inline-block;}子和父样式中添加position:absolute;同时在子样式中加入right:**px;(宽度自己定义)
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
HTML, CSS und jQuery: Erstellen Sie eine Schaltfläche mit schwebendem Effekt
Oct 24, 2023 pm 12:09 PM
HTML, CSS und jQuery: Für die Erstellung einer Schaltfläche mit schwebendem Effekt sind spezifische Codebeispiele erforderlich. Einführung: Heutzutage ist Webdesign zu einer Kunstform geworden. Durch den Einsatz von Technologien wie HTML, CSS und JavaScript können wir der Seite verschiedene Aspekte hinzufügen . Solche Spezialeffekte und interaktiven Effekte. In diesem Artikel wird kurz erläutert, wie Sie mithilfe von HTML, CSS und jQuery eine Schaltfläche mit schwebendem Effekt erstellen, und es werden spezifische Codebeispiele bereitgestellt. 1. HTML-Struktur Zuerst müssen wir
Was sind in JavaFX die verschiedenen Pfadelemente?
Aug 28, 2023 pm 12:53 PM
Das Paket javafx.scene.shape stellt einige Klassen bereit, mit denen Sie verschiedene 2D-Formen zeichnen können. Dies sind jedoch nur primitive Formen wie Linien, Kreise, Polygone und Ellipsen usw. Wenn Sie also komplexe benutzerdefinierte Formen zeichnen möchten, benötigen Sie um die Path-Klasse zu verwenden. Path-Klasse Path-Klasse Mit diesem geometrischen Umriss, der eine Form darstellt, können Sie benutzerdefinierte Pfade zeichnen. Zum Zeichnen benutzerdefinierter Pfade stellt JavaFX verschiedene Pfadelemente bereit, die alle als Klassen im Paket javafx.scene.shape verfügbar sind. LineTo – Diese Klasse repräsentiert die Pfadelementlinie. Es hilft Ihnen, eine gerade Linie von den aktuellen Koordinaten zu den angegebenen (neuen) Koordinaten zu zeichnen. HlineTo – Dies ist die Tabelle
CSS-Übergangseffekt: So erzielen Sie den Gleiteffekt von Elementen
Nov 21, 2023 pm 01:16 PM
CSS-Übergangseffekt: So erzielen Sie den Gleiteffekt von Elementen Einführung: Im Webdesign kann der dynamische Effekt von Elementen das Benutzererlebnis verbessern, wobei der Gleiteffekt ein häufiger und beliebter Übergangseffekt ist. Durch die Übergangseigenschaft von CSS können wir leicht den gleitenden Animationseffekt von Elementen erzielen. In diesem Artikel wird erläutert, wie Sie mithilfe von CSS-Übergangseigenschaften den Gleiteffekt von Elementen erzielen, und es werden spezifische Codebeispiele bereitgestellt, um den Lesern ein besseres Verständnis und eine bessere Anwendung zu ermöglichen. 1. Einführung in den CSS-Übergangsattributübergang CSS-Übergangsattributtra
C++-Programm: Fügen Sie einem Array ein Element hinzu
Aug 25, 2023 pm 10:29 PM
Ein Array ist eine lineare sequentielle Datenstruktur, die dazu dient, homogene Daten an zusammenhängenden Speicherorten zu speichern. Wie andere Datenstrukturen müssen Arrays in der Lage sein, Elemente auf effiziente Weise einzufügen, zu löschen, zu durchlaufen und zu aktualisieren. In C++ sind unsere Arrays statisch. C++ bietet auch einige dynamische Array-Strukturen. Bei einem statischen Array können Z-Elemente im Array gespeichert werden. Bisher haben wir n Elemente. In diesem Artikel erfahren Sie, wie Sie in C++ Elemente am Ende eines Arrays einfügen (auch als anhängende Elemente bezeichnet). Verstehen Sie das Konzept anhand von Beispielen. Die Verwendung des Schlüsselworts „this“ ist wie folgt: GivenarrayA=[10,14,65,85,96,12,35,74,69]Afterin
Gibt es eine Möglichkeit, Floats zu löschen?
Feb 22, 2024 pm 04:00 PM
Gibt es eine Methode zum Löschen von Floats? Im Webseitenlayout sind Floats eine gängige Layoutmethode, die es ermöglicht, Elemente aus dem Dokumentfluss zu lösen und relativ zu anderen Elementen zu positionieren. Bei der Verwendung des Floating-Layouts tritt jedoch häufig das Problem auf, dass das übergeordnete Element das Floating-Element nicht korrekt umschließen kann, was zu einem ungeordneten Layout der Seite führt. Daher müssen wir Maßnahmen ergreifen, um den Float zu löschen, damit das übergeordnete Element das Float-Element korrekt umschließen kann. Es gibt viele Möglichkeiten, Floats zu löschen. Im Folgenden werden einige häufig verwendete Methoden vorgestellt und spezifische Codebeispiele gegeben.
Welche Elemente werden von HTML5 nicht unterstützt?
Aug 11, 2023 pm 01:25 PM
Elemente, die HTML5 nicht unterstützt, sind rein ausdrucksstarke Elemente, rahmenbasierte Elemente, Anwendungselemente, austauschbare Elemente und alte Formularelemente. Ausführliche Einführung: 1. Rein ausdrucksstarke Elemente wie Schriftart, Mitte, S, U usw. Diese Elemente werden normalerweise zur Steuerung des Textstils und -layouts verwendet. 2. Rahmenbasierte Elemente wie Rahmen, Frameset und Noframes Elemente werden in der Vergangenheit zum Erstellen von Webseitenlayouts und geteilten Fenstern verwendet. 3. Anwendungsbezogene Elemente wie Applet, Isinde usw.
CSS-Transformation: So erzielen Sie den Rotationseffekt von Elementen
Nov 21, 2023 pm 06:36 PM
CSS-Transformation: Um den Rotationseffekt von Elementen zu erzielen, sind spezifische Codebeispiele erforderlich. Im Webdesign sind Animationseffekte eine der wichtigen Möglichkeiten, die Benutzererfahrung zu verbessern und die Aufmerksamkeit des Benutzers zu erregen, und Rotationsanimationen sind eine der klassischeren Methoden. In CSS können Sie das Attribut „transform“ verwenden, um verschiedene Verformungseffekte von Elementen zu erzielen, einschließlich Rotation. In diesem Artikel wird detailliert beschrieben, wie Sie mithilfe der CSS-Transformation den Rotationseffekt von Elementen erzielen, und es werden spezifische Codebeispiele bereitgestellt. 1. Verwendung von CSSs „transf
So verwenden Sie CSS, um den Transparenzverlaufseffekt eines Elements zu erzielen
Nov 21, 2023 pm 01:38 PM
So verwenden Sie CSS, um den Transparenzverlaufseffekt von Elementen zu erzielen. In der Webentwicklung ist das Hinzufügen von Übergangseffekten zu Webseitenelementen eines der wichtigen Mittel zur Verbesserung der Benutzererfahrung. Der Verlaufseffekt der Transparenz kann nicht nur die Seite glatter machen, sondern auch den Hauptinhalt des Elements hervorheben. In diesem Artikel wird erläutert, wie Sie mithilfe von CSS den Transparenzgradienteneffekt von Elementen erzielen, und es werden spezifische Codebeispiele bereitgestellt. Verwenden des CSS-Übergangsattributs Um den Transparenzverlaufseffekt eines Elements zu erzielen, müssen wir das CSS-Übergangsattribut verwenden. T
