This article describes how to set the HTML span width.
The width setting of HTML span is invalid by default.In HTML, how do I set the span width? This seems to be a very simple problem. It seems that you can use 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">Click the link to view the effect
After the test, it is found that the code is invalid, both in Firefox and IE.
By looking at the width definition in the css2 standard, we found that the width attribute in the original CSS is not always valid. if the object is an inline object, the width attribute will be ignored. Firefox and IE follow the standard.
Changing span to block type and setting float is not perfectAdd the display attribute to the CSS of span and set span to block-type element. The width is indeed valid, but the text before and after is separated into different rows. In this way, the span is actually a div.
span { background-color:#ffcc00; display:block; width:150px;}Click the link to view the effect
Many people will suggest adding another CSS attribute float, which can solve the problem under certain conditions. For example, in our example, if there is no text before span, it is indeed feasible. But if there is, the front and back texts will be connected together, And Span runs to the second line.
span { background-color:#ffcc00; display:block; float:left; width:150px;}Click the link to view the effect
HTML buttonIn fact, there are indeed inline and width settings in various HTML elements. For example, the following code shows the button object, which can appear in the middle of the text and set the width.
<body>fixed <button style="width:150px;">width</button> button</body>Click the link to view the effect
Can span be displayed like a button? Based on the display definition in the css2 standard and the interpretation of the inline object, it is found that the developers of the css2 standard set whether all elements belong to the inline, it is either a block. If no button is specified, it is both an inline and the attribute value of the width can be set as a block.
Standard CSS 2.1 updatedLet's look at the updated standard. In the definition of display in the standard draft of css2.1Inline-blockThe attribute value. Then let's look at the corresponding situation of various browsers.
FirefoxThe display document shows that inline-block will be implemented in Firefox 3 in the future. Refer to mozllia extended attributes.
IE
Versions earlier than 3, such as Firefox 2, can be used-Moz-inline-boxAchieve the same effect.According to the display document in msdn, inline-block has been implemented. The actual test shows that IE 6.0 and later versions are normal.
Perfect solution for setting span widthThe CSS definition in the following code perfectly solves the problem of span width setting. Because browsers usually ignore unsupported CSS attributes, it is best to write the display: inline-block row in the back, so that in Firefox, if Firefox 3 is in the future, this line works, and the code can be compatible with various versions at the same time.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Click the link to view the effect
Author or editor: silkworm estimation last updated:Source: www.blabla.cn
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
