The width setting of span is not valid by default
How do I set the width of a span in HTML? This seems like a very simple question, which seems to be possible with the width attribute in the style. For example
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">After the experiment found that invalid, whether in Firefox or IE is not valid.
By reviewing the definition of width in the CSS2 standard, it is found 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 have followed the standard to do so.
modifying span to block type and setting float is not a perfect solution
Add the display property to the span CSS and set span to the block type element so that the width is valid, but also to separate the front and back text into different lines. In fact, span becomes P completely.span {background-color: #ffcc00; display:block; width:150px;}A lot of people would suggest adding a CSS property, float, which would actually solve the problem under some conditions. For example, if there is no text in front of span, it is possible. But if it does, the text will be linked together, and span runs to the second line.
span {background-color: #ffcc00; display:block; float:left; width:150px;}The case of button
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 following code shows the button object, which can be very good to appear in the middle of the text, and set the width.<body> fixed <button style= "width:150px;" >width</button> Button </body>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.
Updated Standard CSS 2.1
Looking again at the updated standard, the definition of display in the CSS2.1 standard adds a property value called Inline-block, which is exactly what we are dealing with. Then look at the corresponding situation of the various browsers.
Firefox
Through the display's documentation, Inline-block will be implemented in the future of Firefox 3. 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
The Inline-block has been implemented through the display documentation in MSDN. The actual test found IE 6.0 is no problem.
The perfect solution
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.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!
Related recommendations:
How to use CSS to clear floating methods
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
