Solved the problem that the list icon is not displayed when using list-style-position:outside in CSS

When I was modifying the style of a website today, I encountered a problem. No matter how I adjusted the css properties, an article list icon never appeared. Finally, I changed list-style-position:outside to list- When style-position:inside, the list icon is displayed. In order to find out why list-style-position:outside is not displayed, I kept trying to delete various css attributes to find out the reason why outside was not displayed. However, I never found a definite answer, but it is certain that ul The li attributes width: 100% and padding: 0; will have a certain impact on the list icon not being displayed. If you encounter this problem, please pay attention to these two attributes.

The css2.0 manual explains the two parameters outside and inside as follows:

list-style-position : outside | inside

Value:

outside: default value. The list item mark is placed outside the text, and the surrounding text is not aligned according to the mark

inside: The list item mark is placed inside the text, and the surrounding text is aligned according to the mark

As can be seen from the above definition Padding still has an impact, but I haven't been able to find out what exactly went wrong here. Delete other styles except width:100% or padding:0, and the display effect can be achieved.

The problem comes to an end. Due to style requirements, I changed list-style-type to the value of decimal Arabic numerals. In order to meet the requirement of not automatically wrapping lines when the list line exceeds , using the following three parameters:

overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

However, I found that the list is no longer displayed in Arabic numerals, but all become the number 1. When deleting overflow:hidden, the problem was solved, but the ellipses could not come out, so I learned another hack, which I will need to pay attention to in the future.

The above is the detailed content of Solved the problem that the list icon is not displayed when using list-style-position:outside in CSS. For more information, please follow other related articles on the PHP Chinese website!