关于div的简单css问题

I have a very simple page like this

我有一个非常简单的页面

!!@#@ apparently I cant add link to my page on jsbin since new users aren't allowed to add links.

!! @#@显然我无法在jsbin上添加我的页面链接,因为不允许新用户添加链接。

I want to have certain amount of gap between different options provided to the user (say 15px).

我想在提供给用户的不同选项之间有一定的差距(例如15px)。

Code I have is following:

我的代码如下:

<div id="question" >
    What month is it?
    <div style="padding-right: 15px;" 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>

I thought that adding padding to the right will add padding to each of the radio buttons inside div id options. However, it is only adding padding to the whole div.

我认为在右侧添加填充将为div id选项中的每个单选按钮添加填充。但是,它只是为整个div添加填充。

What is the bes way to handle this?

处理这个问题的方法是什么?

4 个解决方案

#1

You can add the following rule:

您可以添加以下规则:

div#options input { padding-right: 15px }

It will add padding to the right of each "input" element under the div with the id of "options"

它将在div下的每个“input”元素的右侧添加填充,其id为“options”

UPDATED: In the sample, an "id" is being used several times. Id's must be unique, so classes would be more appropriate. See the following example:

更新:在示例中,多次使用“id”。 Id必须是唯一的,因此类更合适。请参阅以下示例:

div.options input { padding-right: 15px; }
<div class="options">
    <input type="radio">...

The class can be reused for other elements that you'd like to share the same style.

该类可以重用于您想要共享相同样式的其他元素。

#2

Your code is asking the browser to place 15px of padding on the right of the DIV so you need to be more specific with your CSS declaration:

您的代码要求浏览器在DIV的右侧放置15px的填充,因此您需要更具体地使用CSS声明:

#options input { padding-right:15px; }

If you place that between style tags or in a style sheet, it should work out just how you want it.

如果您将它放在样式标签之间或样式表中,它应该按照您的需要进行设置。

#3

I think the root of the problem is in the HTML not so much the CSS.

我认为问题的根源在于HTML而不是CSS。

Your HTML is not as good/helpful as it could be. You are presenting a list of months, so mark them up using a list:

您的HTML不是那么好/有用。您将显示月份列表,因此请使用列表标记它们:

<ol id="options" class="formList">
   <li>
      <input type="radio" name="question1" />Jan
   <li/>
   ....
</ol>

A side effect of this now being nice semantic HTML is that it gives you all the correct hooks for your styling. Each part of the form is in it's own element making applying CSS much easier - to add space around the list items use something like:

这个现在是很好的语义HTML的副作用是它为你的样式提供了所有正确的钩子。表单的每个部分都在它自己的元素中,使得应用CSS变得更加容易 - 在列表项周围添加空格使用类似于:

.formList li {margin:15px;}

//off topic:

You should really add label elements to you markup too. Using label elements in forms explicitly associates the text label of a form element with that form element, making the site more accessible and usable - a user can click on the text to activate the radio button which gives them a bigger target making your forms nicer and your users happier.

你应该真正为标记添加标签元素。在表单中使用标签元素显式地将表单元素的文本标签与该表单元素相关联,使网站更易于访问和使用 - 用户可以单击文本以激活单选按钮,从而为他们提供更大的目标,使您的表单更好,让您的用户更快乐。

<label><input type="radio" name="question1" />Jan</label>

or

<input type="radio" id="radio1" name="question1" /><label for="radio1">Jan</label>

#4

The thing to remember is that an inline style 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 class to them, target all inputs (demo: 2) or, as jthompson suggests, target those inputs that are descendants of the particular div (see jthompsons' answer).

要记住的是内联样式将应用于定义标记的元素。要影响输入,你需要直接定位它们(​​演示:1),方法是向它们添加一个类,定位所有输入(demo:2),或者像jthompson建议的那样,将那些输入作为特定div的后代(看到j​​thompsons的回答)。

1. 1. `input {padding-right: 15px; }`, or

   `input {padding-right:15px; },或

   2. `input[type="radio"] {padding-right: 15px; }` // this is CSS3 only, I think.

   `input [type =“radio”] {padding-right:15px;我认为这只是CSS3。

`input {padding-right:15px; }`,或`input [type =“radio”] {padding-right:15px;我认为这只是CSS3。

2. add `class="q1-radio-inputs"` and use the CSS `.q1-radio-inputs {padding-right: 15px; }`

添加`class =“q1-radio-inputs”`并使用CSS` .q1-radio-inputs {padding-right:15px; }`

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.

值得注意的是,使用内联样式没有多大意义,除非它只需要覆盖一次特定的样式,它总是(据我所知)更明智地使用外部工作表,以便进行缓存(如果没有别的话)并且在重新设计/重新设计网站时使其更容易影响所有样式。

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 !important marker, in which case it is not overridden (all being well).

并且,作为附录,样式按以下顺序应用:inline-stlyes覆盖标题中定义的样式,而样式又覆盖外部样式表。除非使用!important标记定义样式,否则它不会被覆盖(一切都很好)。

The following (sort of) helps: http://www.w3.org/TR/CSS2/cascade.html

以下(有点)有帮助:http://www.w3.org/TR/CSS2/cascade.html

---

Edited in response to comments:

<!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>

If the html, above, remains representative of your site (as linked in the comments to this answer), the problem may well be:

如果上面的html仍然代表您的网站(在此答案的评论中链接),问题可能是:

.div#options

the period is used to indicate a class name, the pound '#' is used to indicate a div name, and only one or the other can be used at one time:

句点用于表示类名,井号'#'用于表示div名称,一次只能使用一个或另一个:

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. */