Question

我有一个非常简单的页面

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

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

我的代码如下：

<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添加填充。

处理此问题的方法是什么？

Answer 1

您可以添加以下规则：

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

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

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

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

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

Answer 2

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

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

如果您将它放在样式标签之间或样式表中，它应该按照您想要的方式设置。

Answer 3

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

1. `input {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

编辑回应评论：

<!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仍然代表您的网站（在此答案的评论中链接），问题可能是：

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

Answer 4

我认为问题的根源在于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>

关于div的简单css问题

4 个答案:

编辑回应评论：