StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The thing to remember is that an <code>inline style</code> will apply to the element in which tag it is defined. To affect the inputs you'd need to target them directly (demo: 1) by either adding a <code>class</code> to them, target all inputs (demo: 2) or, as jthompson suggests, target those inputs that are descendants of the particular div (see jthompsons' answer).</p> <ol> <li><ol><li>`input {padding-right: 15px; }`, or</li> <li>`input[type="radio"] {padding-right: 15px; }` // this is CSS3 only, I think.</li></ol> <li>add `class="q1-radio-inputs"` and use the CSS `.q1-radio-inputs {padding-right: 15px; }`</li> </ol> <p>It's also worth noting that using inline styles doesn't make much sense, except where it needs to override a particular style one time only, it's always (so far as I can tell) wiser to use an external sheet, in order for caching (if nothing else) and for making it slightly easier to affect all styles when redesigning/reworking the site.</p> <p>And, as an addenda, styles are applied in the following order: inline-stlyes override styles defined in the header, which in turn override external stylesheets. Unless a style is defined with the <code>!important</code> marker, in which case it is not overridden (all being well).</p> <p>The following (sort of) helps: <a href="http://www.w3.org/TR/CSS2/cascade.html" rel="nofollow noreferrer" title="Link to the W3's website 'Assigning property values, Cascading, and Inheritance.'"><a href="http://www.w3.org/TR/CSS2/cascade.html" rel="nofollow noreferrer">http://www.w3.org/TR/CSS2/cascade.html</a></a></p> <hr /> <h2>Edited in response to comments:</h2> <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style type="text/css" media="screen"> .div#options input { padding-right: 15px } </style> </head> <body> <div id="question" style="padding-bottom: 15px"> What day is it today? <div id="options"> <input type="radio" name="question1" />Sunday <input type="radio" name="question1" />Monday <input type="radio" name="question1" />Saturday <input type="radio" name="question1" />Tuesday </div> </div> <div id="question" > What month is it? <div id="options"> <input type="radio" name="question1" />Jan <input type="radio" name="question1" />Feb <input type="radio" name="question1" />May <input type="radio" name="question1" />Dec </div> </div> </html> </code></pre> <p>If the html, above, remains representative of your site (as linked in the comments to this answer), the problem may well be:</p> <p><code>.div#options</code></p> <p>the period is used to indicate a <code>class</code> name, the pound '#' is used to indicate a <code>div</code> name, and only one or the other can be used at one time:</p> <pre><code>div.options /* is fine, indicating a 'div' of class-name 'options' */ div#options /* is also fine (and both within the same document is, also, fine) indicating a div of id-name 'options' - an id is unique, and can be used only *once* per document */ .div#options /* could be fine, but appears to be targeting an element of id-name 'options' within an element of class-name 'div,' which is not found within your document. */ </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