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;(宽度自己定义)
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1359
52
HTML, CSS and jQuery: Make a button with a floating effect
Oct 24, 2023 pm 12:09 PM
HTML, CSS and jQuery: Making a button with a floating effect requires specific code examples. Introduction: Nowadays, web design has become an art form. By using technologies such as HTML, CSS and JavaScript, we are able to add various aspects to the page. Such special effects and interactive effects. This article will briefly introduce how to use HTML, CSS and jQuery to create a button with a floating effect, and provide specific code examples. 1. HTML structure First, we need to
In JavaFX, what are the different path elements?
Aug 28, 2023 pm 12:53 PM
The javafx.scene.shape package provides some classes with which you can draw various 2D shapes, but these are just primitive shapes like lines, circles, polygons and ellipses etc... So if you want to draw complex For custom shapes, you need to use the Path class. Path class Path class You can draw custom paths using this geometric outline that represents a shape. To draw custom paths, JavaFX provides various path elements, all of which are available as classes in the javafx.scene.shape package. LineTo - This class represents the path element line. It helps you draw a straight line from the current coordinates to the specified (new) coordinates. HlineTo - This is the table
C++ program: add an element to an array
Aug 25, 2023 pm 10:29 PM
An array is a linear sequential data structure used to hold homogeneous data in contiguous memory locations. Like other data structures, arrays must have the ability to insert, delete, traverse, and update elements in some efficient way. In C++, our arrays are static. C++ also provides some dynamic array structures. For a static array, Z elements may be stored in the array. So far we have n elements. In this article, we will learn how to insert elements at the end of an array (also known as appending elements) in C++. Understand the concept through examples. The usage of ‘this’ keyword is as follows: GivenarrayA=[10,14,65,85,96,12,35,74,69]Afterin
CSS transition effect: how to achieve the sliding effect of elements
Nov 21, 2023 pm 01:16 PM
CSS transition effect: How to achieve the sliding effect of elements Introduction: In web design, the dynamic effect of elements can improve the user experience, among which the sliding effect is a common and popular transition effect. Through the transition property of CSS, we can easily achieve the sliding animation effect of elements. This article will introduce how to use CSS transition properties to achieve the sliding effect of elements, and provide specific code examples to help readers better understand and apply. 1. Introduction to CSS transition attribute transition CSS transition attribute tra
CSS transformation: how to achieve the rotation effect of elements
Nov 21, 2023 pm 06:36 PM
CSS transformation: How to achieve the rotation effect of elements requires specific code examples. In web design, animation effects are one of the important ways to improve user experience and attract user attention, and rotation animation is one of the more classic ones. In CSS, you can use the "transform" attribute to achieve various deformation effects of elements, including rotation. This article will introduce in detail how to use CSS "transform" to achieve the rotation effect of elements, and provide specific code examples. 1. How to use CSS’s “transf
What elements are not supported by html5
Aug 11, 2023 pm 01:25 PM
Elements that HTML5 does not support are purely expressive elements, frame-based elements, application elements, replaceable elements and old form elements. Detailed introduction: 1. Purely expressive elements, such as font, center, s, u, etc., these elements are usually used to control text style and layout; 2. Frame-based elements, such as frame, frameset and noframes, these elements are used in In the past, it was used to create web page layouts and split windows; 3. Application-related elements, such as applet, isinde, etc.
Is there any way to clear floats?
Feb 22, 2024 pm 04:00 PM
Is there any method to clear floats? Specific code examples are required. In web page layout, floats are a common layout method that allows elements to break away from the document flow and be positioned relative to other elements. However, a problem often encountered when using floating layout is that the parent element cannot wrap the floating element correctly, causing the page to have a disordered layout. Therefore, we need to take measures to clear the float so that the parent element can wrap the floated element correctly. There are many ways to clear floats. The following will introduce several commonly used methods and give specific code examples.
How to remove elements with jquery
Feb 17, 2023 am 09:49 AM
How to remove elements with jquery: 1. Delete the selected element and its sub-elements through the jQuery remove() method. The syntax is "$("#div1").remove();"; 2. Delete through the jQuery empty() method. The child elements of the selected element, the syntax is "$("#div1").empty();".
