How to set horizontal navigation structure in Html

This article shares with you two methods of setting up horizontal navigation structures, mainly using list structures.

The method combines a block structure with an inline structure.

Here we first introduce the difference between block elements and inline structures.

(1) The block structure can set attributes such as line height, width (width, height), margin (margin, padding), and border. Inline elements can only set line height, left and right margins, but do not have attributes such as margins, top and bottom padding, and borders.

(2) The block structure is more dominant and does not share a row with other elements. Inline elements can be nested within other elements.

Common block elements include ul, ol, p, form, etc. Common inline elements include meta, img, span, h1-h6, label, etc.

But sometimes, in order to make the block structure have the characteristics of inline elements, or to make the inline elements have the characteristics of block elements, the two are combined. Let's take an example of making an inline element have block element characteristics: the a tag is one of the most important inline tags. Users can access the corresponding page according to the link it specifies. In order to make the elements under the a tag more beautiful, we want to set some attributes for this link, including borders, margins, background colors, etc. We know that these attributes are only available to block structures, so at this moment we want to continue using the inline tag a to accommodate the link content, but we also hope that this inline element can also have the relevant attributes of the block structure.

We can solve this problem by setting "a{display:block}".

Similarly, when we want to use a list to achieve the purpose of setting up horizontal navigation, we hope that each row of the list can be displayed on the same line. At this time, we can also achieve this goal by combining block structure with inline structure.

We just need to add one line of code to the list: list{display:inline;}

Method 2 uses the float attribute setting.

The float attribute can be set to float in two directions, including left and right. To set horizontal navigation, we float the list horizontally to the left. We float it to the left because we hope that after setting the floating, the order of navigation will be horizontal from left to right, that is, from left to right, it is navigation one to navigation four, which is more in line with the habits of more users.

Code:

The above is the full content of this article. I hope it will be helpful for everyone’s study.

Original text: http://www.cnblogs.com/xiaoqqmin/p/5317551.html