关于 div 的简单 CSS 问题答案

【问题标题】：Simple css question about div's关于 div 的简单 CSS 问题
【发布时间】：2010-10-28 11:36:57
【问题描述】：

我有一个像这样的非常简单的页面

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

我希望在提供给用户的不同选项之间有一定的差距（比如 15 像素）。

我的代码如下：

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

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

处理这个问题的最佳方法是什么？

【问题讨论】：

标签： html css

【解决方案1】：

要记住的是inline style 将应用于定义它的标签的元素。要影响输入，您需要直接定位它们（演示：1），方法是向它们添加 class，定位所有输入（演示：2），或者如 jthompson 建议的那样，定位那些特定的后代的输入div（请参阅 jthompsons 的回答）。

1. `输入{padding-right: 15px; }`，或
2. `input[type="radio"] {padding-right: 15px; }` // 我认为这只是 CSS3。
添加 `class="q1-radio-inputs"` 并使用 CSS `.q1-radio-inputs {padding-right: 15px; }`

还值得注意的是，使用内联样式并没有多大意义，除非它只需要一次覆盖特定样式，否则（据我所知）使用外部工作表总是更明智，以便用于缓存（如果没有别的），并在重新设计/改造网站时更容易影响所有样式。

并且，作为附录，样式按以下顺序应用： inline-stlyes 覆盖标题中定义的样式，而标题又覆盖外部样式表。除非使用 !important 标记定义样式，在这种情况下它不会被覆盖（一切正常）。

以下（某种）帮助：http://www.w3.org/TR/CSS2/cascade.html

根据 cmets 编辑：

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

如果上面的 html 仍然代表您的网站（在 cmets 中链接到这个答案），那么问题很可能是：

.div#options

句点用于表示class名称，井号“#”用于表示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. */

【讨论】：

因为您已将内联样式应用于您尝试定位的元素的父元素。您需要使用上述任何建议来定位表单输入，而不是 div。
另外，我不知道为什么，但由于某种原因，填充不适用于“输入”元素。然而，保证金确实如此。所以：输入 {margin-right: 15px; } 实现了我认为您正在寻找的东西。

【解决方案2】：

您可以添加以下规则：

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

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

更新：在示例中，“id”被多次使用。 Id 必须是唯一的，因此类会更合适。请参见以下示例：

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

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

【讨论】：

在您的链接中，您有两个 id 为“question”的 div 和两个 id 为“options”的 div。请注意，“id”必须是唯一的。对于你正在做的事情，一堂课会更合适。我会更新我的答案。

【解决方案3】：

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

您的 HTML 不如预期的好/有用。您正在展示月份列表，因此请使用列表标记它们：

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

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

.formList li {margin:15px;}

//离题：

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

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

或

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

【讨论】：

【解决方案4】：

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

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

如果你把它放在样式标签之间或样式表中，它应该会按照你想要的方式工作。

【讨论】：