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">
xmlns="http://www.w3.org/1999/xhtml" >
<title>Test Span</title>
<style type="text/css">
span {
background-color:#ffcc00;
width:150px;
}
</style>
>
<body>
fixed <span>width</span> span
</body>
>
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;
}
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;
}Button status
In 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>
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 updatedLooking at the updated standard, an attribute value named inline-block is added to the display definition in the standard draft of CSS2.1. This is exactly the case we are facing. 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. According to the Mozllia extension attributes reference, we learned that in versions earlier than Firefox 3, for example, Firefox 2, we can use-moz-inline-box to achieve the same effect.
IEAccording to the display document in MSDN, inline-block has been implemented. The actual test showed that there was no problem after IE 6.0.
Perfect solutionThe CSS Definition of the code below perfectly solves the problem of setting the span width. 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">
xmlns="http://www.w3.org/1999/xhtml" >
<title>Test Span</title>
<style type="text/css">
span {
background-color:#ffcc00;
display:-moz-inline-box;
display:inline-block;
width:150px;
}
</style>
>
<body>
fixed <span>width</span> span
</body>
>
Author:Silkworm estimation [Zegoo]
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
