[Import] When CSS encounters XHTML-from display: inline to float: left

A few days ago, I wrote a tab control with the following style:

I used CSS to describe this style. The HTML and CSS code is as follows:

<Ul> <li> <a href = "#" class = "selected"> file </a> </LI> <li> <a href = "#"> Edit </a> </LI> <li> <a href = "#"> View </a> </LI> <li> <a href = "#"> site </a> </LI> <li> <a href = "#"> compile </a> </LI> <li> <a href = "#"> Tool </a> </LI> </ul>

ul{border-bottom:solid 1px #999999;border-left:solid 1px #999999;height:30px;width:100%;margin-left:0px;}li{border-top:solid 1px #999999;border-bottom:solid 0px #999999;border-left:solid 1px #999999;border-right:solid 1px #999999;background-color:#cccccc;width:100px;height:30px;display:inline;list-style-type:none;margin-left:-1px;margin-bottom:-2px;text-align:center;padding-top:10px;}.selected{border-top:solid 1px #999999;border-bottom:solid 0px #999999;border-left:solid 1px #999999;border-right:solid 1px #999999;background-color:#eaeaea;width:100px;height:30px;display:inline;list-style-type:none;margin-left:-1px;margin-bottom:-2px;text-align:center;padding-top:10px;}

There is no problem with using it on a master page. In the afternoon, drag the tab control to a page generated by vs2005. when running the tab, it turns out to be like this:

For the same piece of code and the same browser, how does one achieve different results? After careful check, it is found that the original master page is normal because the master page uses html4.0, and the new page is defined by xhtml1.0, is it because of the strict definition requirements of XHTML? Go to W3C and other resource websites to find out the root cause.

It turns out that the previous statements are always incorrect. By default, the "Li" element is always vertically arranged, so I used display: inline to force it to be arranged in the row direction to achieve the desired effect, however, in XHTML, this not rigorous writing method is not supported, so setting the height and width does not work here. When formatting XHTML labels, the concept of "box" is enhanced. To use some padding effects such as margin and padding, you must first convert the elements into box elements, then you can set the desired effect. So, how to convert an element into a box element? The answer is: float: left/right can be used to float the elements and convert them into boxes, so that the CSS attributes supported by the box element can be used at will.

Based on the above ideas, I changed the display: inline In the CSS above to float: Left. Everything is OK!

The above is just a special case. Many CSS effects will change during the process of converting html4.0 to XHTML. However, such changes have regular rules and guidelines. As long as you master this idea, most problems should be solved.

Source: http://community.hf-mstc.org/cs/blogs/shakewang/archive/2006/06/18/2793.aspx