The width of the li, such as li text size change is equal spacing and width are not equal, do not use the padding can be fulfilled

CodePudding user response:

What are the members of answer

CodePudding user response:

This is usually use dom experience problems
Block-level elements define float, position: absolute, display: inline - block will open content support of container size model (auto) maintain its width, height and you said that scene is similar to horizontal configuration label column, you can refer to the following CSS

 
<style> 
Ul {list - style: none; Padding: 10 px; margin:0; } 
Li {float: left; Padding: 2 em; Margin: 5 px; Border: # 1 px solid CCC; } 
</style> 
 
 Tip1 & lt;/li> 
 Hello world
 
 Seem ok
 
 

Text size changes to support li width and height is float: left, the role of equal spacing margin

CodePudding user response:

Do not use the realization of the rights of the inner and outer margin,

CodePudding user response:

I see meizu website their li width is different, such as the width of the two words, and the width of the three words, and didn't use the width of the inner and outer margin is simple

CodePudding user response:

refer to the second floor of the left hand of god reply:

this is normally use dom experience problems
Block-level elements define float, position: absolute, display: inline - block will open content support of container size model (auto) maintain its width, height and you said that scene is similar to horizontal configuration label column, you can refer to the following CSS

 
<style> 
Ul {list - style: none; Padding: 10 px; margin:0; } 
Li {float: left; Padding: 2 em; Margin: 5 px; Border: # 1 px solid CCC; } 
</style> 
 
 Tip1 & lt;/li> 
 Hello world
 
 Seem ok
 
 

Text size changes to support li width and height is float: left his role, function of equal spacing margin

I see meizu website their li width is different, such as the width of the two words, and the width of the three words, and didn't use the width of the inner and outer margin is simple