<span> the perfect solution for not setting the width!

Using CSS styles to set the width of a span is not valid by default, but sometimes it is necessary to set the width of the span for some typographic requirements, so how do you use CSS styles to set the width of a span in HTML?

Idea: This seems like a very simple question, which seems to be possible with the width attribute in the style.

However, after testing, it is not valid either in Firefox or IE.

In the CSS2 standard, looking at the definition of width, we can see that the Width property in the original CSS is not always valid, and if the object is an inline object, the Width property is ignored. Firefox and IE both follow this standard.

1, preliminary resolution span width scheme

Modify span to block type. Add the display property to the span CSS and set span to block type.

span {
Background-color: #fc0;
Display:block;
width:150px;
}

This width can be achieved, but this also makes the text separate from the front and back in different lines. In fact, span becomes completely div.

2. Further solve the span width scheme

Then we add a CSS property, float, which really solves the problem under some conditions.

span {
Background-color: #fc0;
Display:block;
Float:left;
width:150px;
}

But if there's no text in front of span, that's really doable. But if it does, the text will be linked together, and span runs to the second line.

In fact, in the various element of HTML, there is a case that is both inline and able to set the width. For example, the button object can be very good to appear in the middle of the text, and set the width.

Can you show span as button? Through the definition of display in the CSS2 standard and the interpretation of the inline object, it is found that the CSS2 Standard's creator makes all the element in the inline or not, either inline or block, It does not have a button that is both inline and can set the width of the property value as block.

An attribute value called Inline-block is added to the definition of display in the draft css2.1 Standard, which is exactly what we are dealing with. Then look at the corresponding situation of the various browsers.

Firefox: Through the display documentation, Inline-block will be implemented in Firefox 3 in the future. With the Mozllia extended attribute reference, you can use-moz-inline-box to achieve the same effect in previous versions of Firefox 3, such as Firefox 2 today.

IE: Inline-block has been implemented through the display document in MSDN. The actual test found IE 6.0 is no problem.

3. Perfect solution to span width

The CSS definition of the following code perfectly solves the width setting problem of span. Since browsers often take an ignored attitude towards unsupported CSS properties, it is best to write the Display:inline-block line in the back, so that in Firefox, if the next Firefox 3, the line will work, the code can be compatible with various versions.

An aligned layout that can be used for product library options. Eg:http://www.jiangnancopper.com/product/index

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
  

  

  


 

<span> the perfect solution for not setting the width!