javascript - CSS : Amazingly strikethrough not working on child display:inline-block div - Stack Overflow

admin管理员组

文章数量:1287507

I have a code where if I apply text-decoration: line-through; on outer div, all the inner div elements also must be 'strikethroughed'. This works 100% fine normally; But, if I put the child elements as 'display:inline-block', now the strikethrough applied to the parent div does not effect the strikeness to the childs. I have to put the childs as display:inline-block and I need the childs to be crossed out at the addition of text-decoration: line-through; to the parent div.

div{padding:10px;}
#outer{background:yellow;text-decoration: line-through;}
#inner{background:pink;display:inline-block;}

<div id=outer> 
  <div id=inner>
    This is the text 
  </div> 
</div>

I have a code where if I apply text-decoration: line-through; on outer div, all the inner div elements also must be 'strikethroughed'. This works 100% fine normally; But, if I put the child elements as 'display:inline-block', now the strikethrough applied to the parent div does not effect the strikeness to the childs. I have to put the childs as display:inline-block and I need the childs to be crossed out at the addition of text-decoration: line-through; to the parent div.

div{padding:10px;}
#outer{background:yellow;text-decoration: line-through;}
#inner{background:pink;display:inline-block;}

<div id=outer> 
  <div id=inner>
    This is the text 
  </div> 
</div>

This is an office project, and your help is appreciated !

• javascript
• jquery
• html
• css

Share Improve this question Follow edited May 29, 2015 at 8:09 CodingIntrigue 78.6k3232 gold badges175175 silver badges177177 bronze badges asked May 29, 2015 at 8:05 DeadpoolDeadpool 8,24099 gold badges4848 silver badges9595 bronze badges 3

• 1 you missed " quotes around id. like id="outer" – Amit Soni Commented May 29, 2015 at 8:10
• 2 It wont effect bro. That's not the problem. Results would be same ... – Deadpool Commented May 29, 2015 at 8:11
• 1 @AmitSoni Not required in HTML5. – CodingIntrigue Commented May 29, 2015 at 8:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

Use text-decoration:inherit.

div{padding:10px;}
#outer{background:yellow;text-decoration: line-through;}
#inner{background:pink;display:inline-block; text-decoration:inherit}

<div id=outer> 
  <div id=inner>
    This is the text 
  </div> 
</div>

Normally, text-decoration is not an inherited property, so the inner div has an implicit text-decoration:none, the default. By using inherit, you tell the element that it should have the same text decoration as its parent.

The default value for text-decoration is none, so you need to specify a value if you want it to be different. Use inherit to use the parent's value:

#outer > div { text-decoration: inherit; }

or adapt the css for #inner to include text-decoration: inherit;:

#inner { background: pink; display: inline-block; text-decoration: inherit; }

---

Example

div{padding:10px;}
#outer{background:yellow;text-decoration: line-through;}
#inner{background:pink;display:inline-block; text-decoration: inherit; }

<div id=outer> 
  <div id=inner>
    This is the text 
  </div> 
</div>

本文标签： javascriptCSSAmazingly strikethrough not working on child displayinlineblock divStack Overflow