How HTML sets the width of span

Time:2020-1-19

This is a shareHTMLinspanLabel, how to set the width of the problem.

Span Tags

spanRepresents an inline element, equivalent toinlineAttribute only expands itself according to the width of the element and sets its own width, which does not work.

Well, if I want tospanWhat if the element is set to width without setting the element? Here are several ways to achieve this.

One way

Set upspanAttribute isspan{display:block};, the effect is as follows:

But it doesn’t workspanThe function of this label is to followdivAll of them are block level elements.

Recommendation Index: star2:

Mode two

UsefloatProperty, set property tospan{float:left}, the effect is as follows:

BecausefloatIt will take this content out of the standard document flow, so set the width, which is just in line with my requirements. But remember to clear the cache in the end.

Due to the large amount of code written, the recommended index is: star2:: star2:: star2:: star2:

Tip: don’t understandfloatProperty, please Baidu

Mode three

Usedisplay:inline-blockThe presentation effect is the same as that of mode 2.

displayThere are three common attributes,inlineFor inline elements, andspanSimilar.blockIs a block level element, anddivSimilar.inline-blockCombining the two, you can set the width by yourself without exclusive row.

Less code, recommended index:: star2:: star2:: star2:: star2:: star2:

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.