Databases
StackOverflow2013
Postsdbo
POCan I have a <span> tag ignore the CSS of its parent container?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCan I have a <span> tag ignore the CSS of its parent container?
    text
    copied!<p>I am dealing with some HTML text that I basically have read access to. I can change things with CSS, but the actual layout of the HTML is static. I am using several hundred instances of the same type of HTML that is laid out like the following:</p> <pre><code>&lt;div class = 'outer'&gt; &lt;span class = 'inner'&gt;5&lt;/span&gt; Some other random text that is formatted according to the style of the outer class. &lt;/div&gt; </code></pre> <p>For the purposes of the project I am working on, all of the text that I am displaying within the outer class (<strong>with the exception of the contents of the inner span</strong>) needs to justified. But the contents of the inner span need to be anchored to the start of the line. My current problem is that because all of the text is being justified, the inner span content is being pushed out to different places on the line because the text is all different.</p> <p>So is there a way to have the inner span ignore the fact that the outer class is telling it to be justified? How might I go abut solving this issue?</p> <p><img src="https://i.stack.imgur.com/eF07K.png" alt="enter image description here"></p> <p>I would be fine with the way 6 &amp; 7 look as well as the way 8 &amp; 9 look, just as long as it is consistent.</p> <p>EDIT: CSS</p> <pre><code>.outer { padding-left:10px; padding-right:10px; font-family:palatino; font-size:17px; -webkit-column-count: 2; -webkit-column-gap: 20px; -webkit-column-rule: solid 1px #999; border-bottom: solid 1px #999; text-align:justify; } </code></pre> <p>And then I realized I often times don't have a class set to the SPAN, so I tried to do what the answer below suggested to do like this:</p> <pre><code>.outer span{ display:inline-block; width:10px; }//But it still isn't fixing the issue of the left side alignment </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload