Solution to the problem that the width attribute of html elements has no effect

1. The width attribute of the element has no effect Let’s run the program first and see: [html] 123 [/html] You can see that the span will automatically change the width according to the content it contains. This is because: for inline elements (it can be inline by default, such as span elements, or it can be 1. The width attribute of the element has no effect
Run the program first to see:

Tips : You can modify part of the code first and then run it

You can see that the span will automatically change the width according to the content it contains
This is because: for inline elements (it can be inline by default) For example, span elements can also be display: inline elements)
width and height only trigger hasLayout under IE5.x and IE6 or later versions of quirks mode. For IE6, if the browser is running in standards compatibility mode, inline elements will ignore the width or height attributes, so setting width or height cannot order the element to have layout in this case.
If an element with "layout" also displays: inline, its behavior is very similar to the inline-block mentioned in the standard: it is arranged horizontally and continuously in the paragraph like ordinary text, subject to vertical-align influence, and the size can be adaptively adjusted according to the content. This can also explain why in IE/Win alone, inline elements can contain block-level elements with less problems, because in other browsers, display: inline means inline, unlike IE/Win, once the inline element has a layout, it still has a layout. Will become inline-block.
Solution:
<1>Remove the W3C standard declaration from the ASP.NET page (not recommended):

123
<2>Recommendation:
If display:block is set, the width attribute takes effect, but the span at this time is the same as p.
If display:inline-block is set, the spans will be listed in the same row, and the width attribute will take effect.

Common value descriptions of element display attribute:
block: The default value of block object. Forces the object to be rendered as a block object, adding a new line after the object.
inline: Default value for inline objects. Forces the object to be rendered as an inline object, removing rows from the object. (Inline) "The Definitive Guide to CSS" Chinese text display: Any visible element that is not a block-level element is an inline element. The characteristic of its performance is the form of "row layout". The "row layout" here means that its form of expression is always displayed in rows. For example, when we set an inline element border-bottom:1px solid #000;, it will be repeated in each row, and there will be a thin black line below each row. If it is a block-level element, the black line displayed will only appear below the block.
inline-block: Renders the object as an inline object, but renders the object's contents as a block object. Adjacent inline objects will be rendered on the same line.
non: Hidden object. Unlike the hidden value of the visibility property, it does not reserve its physical space for hidden objects.
The width and height cannot be set for inline (display:inline;) elements because inline belongs to line layout and its characteristic is to be laid out in one line, so the width and height cannot be set.
123

<3>If float is set :left | right, width attributes take effect.
(Floating) It makes the specified element break away from the ordinary document flow and produces extraordinary layout characteristics. And FLOAT must be applied to block-level elements, which means floating does not apply to inline tags. Or in other words when FLOAT is applied then this element will be designated as a block level element.
123
2.Css display: The difference between inline attribute and float
Display: inline; The function of the attribute is to turn block-level elements into inline elements, such as p. After setting the inline attribute, it will no longer occupy a separate line. However, the same effect can be achieved using the float property page. (For information on inline elements and block-level elements, please see inline elements and block-level elements)
When an element is set to the inline attribute and becomes an inline element, setting the width attribute has no effect.
After reading the display: inline's impact on block-level elements, let's take a look at the impact of float on inline elements.
That is, when an inline element sets the float attribute, it actually thinks it is a block-level element. , you can set the width attribute

The above is the detailed content of Solution to the problem that the width attribute of html elements has no effect. For more information, please follow other related articles on the PHP Chinese website!