Use float and display:block to convert inline elements to different points of block elements:
recommendation : As far as possible handwriting code, can effectively improve the learning efficiency and depth.
Inline elements can be converted to block-level elements, such as the use of the float property for inline elements to float inline elements, or to add displayto inline elements: block. Although both can make inline elements into block-level elements, there are differences. The code example is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">a{Height:30px;Line-height:30px;float: Left;Background-color:#F60;}</style></Head><Body> <ahref="#">Ant Tribe</a></Body></HTML>
The above code uses float to achieve the conversion of a element to block-level elements, you can see that the width is based on the content. Let's look at a code example:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">a{Height:30px;Line-height:30px;Display:Block;Background-color:#F60;}</style></Head><Body> <ahref="#">Ant Tribe</a></Body></HTML>
The above code adds display:block to the a element and converts it to an accounting element, but the width is not determined by the content, but by default it is width:100%.
There may be more differences between the two, welcome to add a message.
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=4615
For more information, refer to: http://www.softwhy.com/divcss/
Convert inline elements to different points of block elements using float and display:block