Several points that come to mind when solving the problem of ul centering_Experience exchange

I encountered a problem recently when I was building a website: the navigation bar I built using ul tags and li tags wanted to be centered without knowing the number of li and the width of li, ul, but after using text-align:center for ul But it didn't have the desired effect.

The original page structure is:

Copy code The code is as follows:

• Firede


• Style5

The style sheet structure is:

Copy code The code is as follows:

There is no problem with this, but because an ID (menu) and two CLASS (menu_ul, menu_li) are defined to implement a function, the CSS file becomes bloated.

The reason why I can't figure out the problem of ul centering is because the CSS is too messy. By the end of the chain, I am confused. The code that defines the structure is mixed in various ways to display the effect. The code I wrote was messed up.

When my brain was dizzy, I didn’t want to modify it anymore, so I rewrote the code to implement the above functions. The page structure:

Copy code The code is as follows:

• Firede


• Style5

Complete style sheet:

Copy code The code is as follows:

Like this, it is very simple to solve the problem that ul cannot be centered. Looking back at my code, it turned out that it was because I added an extra sentence of float:left in the style of li. Because the defined display is not block, but inline, it cannot float, causing a conflict, and ultimately ul cannot be displayed in the center.

To summarize, when writing the structure of a web page, it is best to use relatively uniform CSS names for the same functional module. If you can define a style name to solve the problem, try not to define more than one, and the code should be as concise as possible. Because the code is bloated, it is easy to go wrong, and it is difficult to find where the error is. Use a series of styles like menu, menu ul, menu li, menu a, menu a:hover instead of defining some styles like menu, menu_ul, menu_ul_li that seem to be clearly organized and hierarchical, but are actually very confusing. name.

Habits are the essence of past experiences summed up subconsciously. However, with the advancement of technology, many past habits have become obstacles to further improvement. At this time, it is necessary to refer to the standards and look at the past Are habits worth sticking to? The same goes for making a website. Standards can improve efficiency, improve performance and point out the direction. The standardized design of the Web can help us improve the efficiency of maintaining the website.