Question

我确定这是一个愚蠢的问题，但我不能将这个内部（按钮）内联样式移动到样式表：

<label style='white-space:nowrap; line-height:14px; height:14px; vertical-align:bottom; '>
<input type  = 'button'
       id    = 'sButton2'
       style = 'cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px' >
The quick brown fox
</label>

我试过这个：

<style type="text/css">
#sButton2 { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px; }
</style>
...
<label style='white-space:nowrap; line-height:14px; height:14px; vertical-align:bottom; '>
<input type  = 'button'
       id    = 'sButton2' >
The quick brown fox
</label>

和此：

<style type="text/css">
.sButton { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px; }
</style>
...
<input type  = 'button'
       id    = 'sButton1'
       class = 'sButton' >

但这些都不起作用;没有应用样式。知道我做错了吗？

感谢。

修改

对不起伙计们，已经是午夜了，我（是！）刚下床睡觉，我搞砸了。样式表的语法实际上是正确的 - 我已在上面修复它。其他信息：

1-样式表位于单个html文件的head部分。它上面已经有几个jQueryUI，我从它们复制了语法;

2 - 我认为按钮有另一种风格，但我希望＃sButton2会覆盖它;

3 - 我无法从样式表中获得最简单的样式按钮。例如，如果我只设置按钮宽度，虽然内联宽度有效，但没有任何反应;

4 - 它不是浏览器特定的 - 见于F / F，Opera，Chrome;

再次感谢。

EDIT2

尝试在样式表的末尾添加！important，而不改变F / F＆amp;铬：

...margin-right:12px; !important }

Answer 1

<style type="text/css">
#sButton2 { 'cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px' >
</style>

应该是

<style type="text/css">
#sButton2 { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px }
</style>

您需要使用{结束第一个}，而不是>。而且样式不是引号，它们只是用花括号括起来。您还应该查看HTML代码的标准内容。通常元素的布局如下：

<input type="button" id="sButton2" />

遵循这样的标准是个好主意。

Answer 2

更改

#sButton { 'cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px' >

到

#sButton { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px }

应该这样做。

（删除'在开头和结尾处，并将＆gt;替换为}}

Answer 3

您的内心风格以>而不是}

结尾

此外，它应该在您的head标记

中

最后你为什么用单引号包装你的风格？

Answer 4

愚蠢的问题，但你确定正在加载样式表吗？我已经看到人们有多个样式表，他们正在加载错误的样式，或者他们编辑错误的样式表。

您可能稍后在样式表中使用覆盖样式。你有任何输入风格吗？ ID应该覆盖不太具体的样式，但是在某些浏览器中存在可能需要解决的错误。

尝试使用！important

DOH！是的，正如其他人所说，你的问题是围绕你的css属性的单引号。

Answer 5

<style type="text/css">
    .sButton {
    cursor:pointer; 
    width:30px; 
    height:13px; 
    float:left; 
    margin-bottom:2px; 
    margin-right:12px
</style>

<input type="button" id="sButton1" class="sButton">

http://jsfiddle.net/charlescarver/aQHyK/

Answer 6

#是ID的正确前缀（正如您在第二个代码示例中实际使用的那样），但您不应该在css代码周围包含引号。试试这样：

<style type="text/css">
    #sButton2 { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px; }
</style>

对代码执行a validator（这总是一个好主意）也会告诉你这一切！

Answer 7

修复了Firebug提供的大量帮助（这是一个很棒的软件）。输入标记位于jQueryUI对话框中，并从'#dialog input'继承'width：95％'。我的样式表中的'width：30px'被忽略，直到我将其改为'width：30px！important'，在所有F / F，Chromium和Opera中。它在div（＃sButton2）和class（.sButton）样式中都被忽略了。

我不明白这一点。如果你不能在不增加任意重要性的情况下覆盖它，那么继承的重点是什么？ css继承是否破裂？不是！重要的只是承认它已经坏了吗？

我原本以为整个样式表都被忽略了，因为输入按钮扩展到95％，并使其看起来像其他一切也被忽略了。但是，我最终意识到样式的一部分实际上正在工作 - 'cursor：pointer'确实显示了一个光标。

谢谢大家。

无法将内联样式移到样式表中？

修改

EDIT2

7 个答案: