How to set the width of span in HTML . This seems to be a very simple question, as if using the width attribute in 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 test found that the invalid, whether in Firefox or IE are not valid.
By looking at the definition of width in the CSS2 standard, it is found that the width attribute in the original CSS is not always valid, and if the object is a inline object, the width attribute is ignored. Firefox and IE used to follow 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 block-type element so that the width does work, but it also separates the front and back text in different rows. In fact, span is completely transformed into a div.
span { background-color: #ffcc00; Display:block; width:150px; }Many people would suggest adding a CSS property float so that it does solve the problem under certain conditions. For example, in our example, if there is no text in front of the span, it is indeed feasible. But if it does, the text will be linked together, and span runs to the second line.
Button's conditionspan { background-color: #ffcc00; Display:block; Float:left; width:150px; }In fact, in the various element of HTML, there is indeed both inline and the ability to set the width of the situation exists. For example, the following code shows the button object, which appears well in the middle of the text and sets the width.
<body> fixed <button style= "width:150px;" >width</button> button </body>Can I have span like a button to show it. Through the definition of display in the CSS2 standard and the interpretation of the inline object, it was found that the CSS2 standard made all the element in the inline or not, either inline or block, No button is established as both inline and can set the width of the property value as block. updated standard CSS 2.1
Looking at the updated standard, the definition of display in the CSS2.1 draft standard adds a property value called Inline-block, which is precisely the case we face. Then look at the various browsers of the corresponding situation. Firefox
As you can see from the display documentation, Inline-block will be implemented in the next Firefox 3. The Mozllia extended attribute reference is to understand that the previous version of Firefox 3, such as the current Firefox 2, can achieve the same effect with-moz-inline-box. IE
Learn from the display documentation in MSDN that Inline-block has been implemented. The actual test found that after IE 6.0 no problem. the perfect solution
The CSS definition of the following code perfectly solves the problem of span width setting. Since browsers usually ignore the 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, this 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 ">
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
