Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you how HTML makes the horizontal arrangement of li elements in ul relevant knowledge points, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can get something after reading this article, let's take a look at it.

Note:

1. There are dots in front of the li list by default. Sometimes you need to remove the extra dots for beauty, you can use the list-style:none attribute in CSS, of course, you can also add some pictures in front of the list.

2, in order to make the page more attractive, navigation will generally use pseudo-class elements, the most common is hover, which can change the navigation background color, font size, pictures and so on when the mouse navigates.

3. Skillfully use the display attribute in CSS. If you want li to have height and width, and you need to adjust the position of the menu contents, you must set the value of the display property to block, and make it a block-level element before attributes such as padding,text-align can work.

1. Display:inline to realize horizontal arrangement of ul

Use ulli to do a horizontal navigation to change the background color when the mouse passes over. The code is as follows:

HTML section:

Home page

Course introduction

Teachers' strength

news information

Contact us

CSS section:

# nav {

Margin:50pxauto

Height:40px

Background-color:#690

}

# navul {

List-style:none

Margin-left:50px

}

# navli {

Display:inline

}

# nava {

Line-height:40px

Color:#fff

Text-decoration:none

Padding:20px20px

}

# nava:hover {

Background-color:#060

}

This is all the content of the article "how to arrange the li elements in ul horizontally by HTML". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.