Use float and display:block to convert inline elements to different points of block elements:
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 display:block to inline elements. 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.51texiao.cn/" /><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.51texiao.cn/" /><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.51texiao.cn/div_cssjiaocheng/2015/0503/594.html
The original address is: http://www.softwhy.com/
Convert inline elements to different points of block elements using float and display:block
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
