2017-04-24 39 views
-1

我被一个额外的关闭咖喱括号在CSS中,我不小心把事先写其他行。如果我把它留在那里,它实际上对结果没有坏处。但是,当我删除它时,其他元素的位置会重新定位。我不小心把一个额外的关闭花括号

((代码行,额外的右大支架,其中箭头指向))

请点击下面的链接,看到两个结果。

问题:有没有什么办法在不重新定位其他元素的情况下将其删除?

Without the Close Curly Bracket

With the Close Curly Bracket

body{ 
font: 15px/1.5 Helvetica, Arial, sans-serif; 
padding: 0; 
margin: 0; 
p(color#282f38); 
background-color: #F5F2ED; 
font:696863; 
} 

/*Global*/ 
.container{ 
width:80%; 
margin:auto; 
overflow:hidden; 
} 

ul{ 
margin:0; 
padding:0; 
} 

/* Header */ 
#fixed{ 
position: fixed; 
} 

header{ 
position: fixed; 
width: 100%; 
background:#282f38; 
color:#F5F2ED; 
padding-top: 10px; 
min-height:50px; 
border-bottom:#F5F2ED 3px solid; 
} 

header a{ 
color:#F5F2ED; 
text-decoration:none; 
text-transform:uppercase; 
font-size: 18px; 
} 

header li{ 
float:left; 
display: inline; 
padding: 0 20px 0 20px; 
} 

header #resume{ 
float: left; 
} 

header #resume h1{ 
margin: 0; 
padding: 0; 
} 

header nav{ 
position: relative; 
left: 30%; 
float: right; 
margin-top: 10px; 
} 
header .highlight, header .current a{ 
color:#696863 ; 
font-weight: bold; 
} 

header a:hover{ 
color:#696863; 
font-weight: bold; 
} 

/* Showcase */ 
#showcase { 
min-height: 350px; 
background: url('../Resources/Photographer.png') no-repeat 0 -120px; 
align-items: center; 
color: #ffffff; 
overflow: auto; 
} 

#showcase h1{ 
text-align: center; 
margin-top: 100px; 
font-size: 40px; 
margin-bottom: 10px; 
} 

#showcase p{ 
text-align:justify; 
margin:0; 
padding:0; 
font-size: 14; 
text-indent: inherit; 
} 

/* Social Medias*/ 

#socialmedias{ 
position:fixed; 
padding-top: : 5px; 
right: 20px; 
top: 130px; 
display: block; 
vertical-align: baseline; 
font: inherit; 
list-style-type: none; 
} 

} <<----------------------------------------------------------------------- 
/* Message Me Box */ 
#box{ 
width: 30%; 
overflow: hidden; 
padding: 1px; 
} 
/* Box Border */ 
.fieldset{ 
display: inline-block; 
border: 3px solid; 
float: right; 
} 
/* Message Me Title */ 
#legend{ 
font-size: 20px; 
font-weight: bold; 
color:#282f38; 
} 
/* Name Input */ 
#form-name{ 
display: block; 
width: 200px; 
margin-bottom: 10px; 
} 
/* Email Input */ 
#form-email{ 
display: block; 
width: 200px; 
margin-bottom: 10px; 
} 
/* Message Input */ 
#form-message{ 
display: block; 
margin-bottom: 10px; 
} 
/* Contact */ 
.button_contact{ 
position: relative; 
height: 30px; 
width: 100%; 
background:#696863; 
color: #F5F2ED; 
font-size: 14px; 
text-transform: uppercase; 
border: 0; 
} 
+0

谢谢你这么多帕特里克MLR –

+0

您可以通过掉毛工具 –

+0

@PhumchaiPipatanamongkol嗨运行你的代码,作为一般的提示,如果选择页面上的ID(如'头#resume {'),你不应该需要比只使用ID更具体(即'#resume {')。只有当你需要时才如此具体。此外,使用'header'选择器非常危险,因为'header'是一个普通元素,这意味着您的页面可能有多个'header'标签。你大概只希望你的样式适用于页面页眉,而不是所有可能出现在页面上的“标题”标签,所以我建议在页眉上使用类或ID。 –

回答

2

额外的花括号被视为选择下一个规则的一部分。即规则是

} #box { 
width: 30%; 
overflow: hidden; 
padding: 1px; 
} 

因此} #box什么都不匹配。当您删除}时,选择器为#box,并与ID为“box”的元素相匹配。

如果您不想要删除额外的}时所得到的效果,请删除整个规则。

+0

我真诚的感谢您的时间和帮助! –

-1

我觉得有什么做的HTML和CSS “#FIXED” ID名称。 尝试将名称更改为其他名称。财产和你的名字可能会相互碰撞。所以,改变它...

+1

这绝对不是正确的答案。 –

+0

谢谢你的时间和帮助 –

+0

@PatrickMlr你是对的,但它确实突出了SO语法突出显示的问题。 –

2

不只是一个错误,

检查我在你的代码添加注释。

避免这些错误的最佳方法是使用IDE。 有这么多的开源工具可用。例如NetBeans。

他们可以帮助您识别您的错误。 检查此截图,它们也易于使用。

enter image description here

/* Social Medias*/ 

#socialmedias{ 
position:fixed; 
padding-top: : 5px; // Error 1, 
right: 20px; 
top: 130px; 
display: block; 
vertical-align: baseline; 
font: inherit; 
list-style-type: none; 
} 

} // Error 2 

body{ 
font: 15px/1.5 Helvetica, Arial, sans-serif; 
padding: 0; 
margin: 0; 
p(color#282f38); // Error 3 
background-color: #F5F2ED; 
font:696863; 
} 
+1

感谢您的澄清和时间! –

2

你在你的CSS许多错误。我验证过上W3C CSS Validator

enter image description here

我已经改变了你的CSS你的CSS。请看下图:

body { 
 
\t font: 15px/1.5 Helvetica, Arial, sans-serif; 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t background-color: #F5F2ED; 
 
} 
 

 
p { 
 
\t color: #282f38; 
 
} 
 

 
/*Global*/ 
 
.container { 
 
\t width: 80%; 
 
\t margin: auto; 
 
\t overflow: hidden; 
 
} 
 

 
ul { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
/* Header */ 
 
#fixed { 
 
\t position: fixed; 
 
} 
 

 
header { 
 
\t position: fixed; 
 
\t width: 100%; 
 
\t background: #282f38; 
 
\t color: #F5F2ED; 
 
\t padding-top: 10px; 
 
\t min-height: 50px; 
 
\t border-bottom: #F5F2ED 3px solid; 
 
} 
 

 
header a { 
 
\t color: #F5F2ED; 
 
\t text-decoration: none; 
 
\t text-transform: uppercase; 
 
\t font-size: 18px; 
 
} 
 

 
header li { 
 
\t float: left; 
 
\t display: inline; 
 
\t padding: 0 20px 0 20px; 
 
} 
 

 
header #resume { 
 
\t float: left; 
 
} 
 

 
header #resume h1 { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
header nav { 
 
\t position: relative; 
 
\t left: 30%; 
 
\t float: right; 
 
\t margin-top: 10px; 
 
} 
 

 
header .highlight, header .current a { 
 
\t color: #696863; 
 
\t font-weight: bold; 
 
} 
 

 
header a:hover { 
 
\t color: #696863; 
 
\t font-weight: bold; 
 
} 
 

 
/* Showcase */ 
 
#showcase { 
 
\t min-height: 350px; 
 
\t background: url('../Resources/Photographer.png') no-repeat 0 -120px; 
 
\t align-items: center; 
 
\t color: #ffffff; 
 
\t overflow: auto; 
 
} 
 

 
#showcase h1 { 
 
\t text-align: center; 
 
\t margin-top: 100px; 
 
\t font-size: 40px; 
 
\t margin-bottom: 10px; 
 
} 
 

 
#showcase p { 
 
\t text-align: justify; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t font-size: 14px; 
 
\t text-indent: inherit; 
 
} 
 

 
/* Social Medias*/ 
 
#socialmedias { 
 
\t position: fixed; 
 
\t padding-top: 5px; 
 
\t right: 20px; 
 
\t top: 130px; 
 
\t display: block; 
 
\t vertical-align: baseline; 
 
\t font: inherit; 
 
\t list-style-type: none; 
 
} 
 

 
/* Message Me Box */ 
 
#box { 
 
\t width: 30%; 
 
\t overflow: hidden; 
 
\t padding: 1px; 
 
} 
 
/* Box Border */ 
 
.fieldset { 
 
\t display: inline-block; 
 
\t border: 3px solid; 
 
\t float: right; 
 
} 
 
/* Message Me Title */ 
 
#legend { 
 
\t font-size: 20px; 
 
\t font-weight: bold; 
 
\t color: #282f38; 
 
} 
 
/* Name Input */ 
 
#form-name { 
 
\t display: block; 
 
\t width: 200px; 
 
\t margin-bottom: 10px; 
 
} 
 
/* Email Input */ 
 
#form-email { 
 
\t display: block; 
 
\t width: 200px; 
 
\t margin-bottom: 10px; 
 
} 
 
/* Message Input */ 
 
#form-message { 
 
\t display: block; 
 
\t margin-bottom: 10px; 
 
} 
 
/* Contact */ 
 
.button_contact { 
 
\t position: relative; 
 
\t height: 30px; 
 
\t width: 100%; 
 
\t background: #696863; 
 
\t color: #F5F2ED; 
 
\t font-size: 14px; 
 
\t text-transform: uppercase; 
 
\t border: 0; 
 
}

+0

非常感谢 –

0
/* Header */ 
----------------->#fixed{<------------------ 
position: fixed; 
} 

试图改变其中的箭头指向的ID,使用类,因为有这么多的矛盾,如果我们直接使用的ID。欲了解更多信息,请找到下面的链接:

https://github.com/CSSLint/csslint/wiki/disallow-ids-in-selectors

+0

非常感谢您的帮助 –