Add styles to span tags_html/css_WEB-ITnose

> ; Library
1.2-Add jQuery
1.3-Write simple jQuery code
1.4-jQuery object and DOM objects
1.5-Resolving conflicts between jQuery and other libraries
1.6-jQuery development tools and plug-ins
1.7-Summary




I would like to ask my friends why I am span Why is the width of the background style added to the element not 250px? But only the area behind the words in the span tag displays the background color? I hope you can help me, thank you very much! Thanks in advance!

Reply to discussion (solution)

span is not a block-level element, setting width is invalid

span is an inline element, high width It is determined by its content

.has_children span{background:red;width:250px;}

Change to this
.has_children span{display:block;background:red; width:250px;}


The position occupied by div is one line, and the space occupied by span is as wide as the content is.

I have said everything that needs to be said.

The correct answer on the second floor is display:block and add this

The correct answer on the second floor is

display:block and add this

.has_children span{background:red; width:250px; display:inline-block}

Correct answer upstairs

.has_children span{background:red;width:250px;display:inline-block}

IE lower block element How to achieve the effect of display:inline-block?

There are two methods:

1. First use the display:inline-block attribute to trigger the block element, and then define display:inline to render the block element as an inline object (the two displays must be placed in two This is a classic bug of IE. If display:inline-block is defined first, and then the display is set back to inline or block, the layout will not disappear). The code is as follows (...are other attribute contents omitted):

div {display:inline-block;...}
div {display:inline;}

2. Give block directly The element is set to be rendered as an inline object (set the attribute display:inline), and then the layout of the block element is triggered (such as zoom:1, etc.). The code is as follows:
div {display:inline; zoom:1;...}




Thank you for your answers!