Question

我在CSS中使用了一个额外的咖喱支架，我在写其他线之前不小心把它放了。如果我把它留在那里，它对结果没有任何伤害。但是，当我删除它时，其他元素的位置会重新定位。

（（在代码行中，额外的大括号是箭头指向的位置））

请点击以下链接查看两个结果。

问题：有没有办法在不重新定位其他元素的情况下删除它？

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

Answer 1

不只是一个错误，

检查我在代码中添加的评论。

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

他们可以帮助您识别错误。看看这个截图，它们也很容易使用。

/* 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;
}

Answer 2

你的css中有很多错误。我已在W3C CSS Validator

上验证了您的css

我已经改变了你的CSS。见下文：

body {
	font: 15px/1.5 Helvetica, Arial, sans-serif;
	padding: 0;
	margin: 0;
	background-color: #F5F2ED;
}

p {
	color: #282f38;
}

/*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: 14px;
	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;
}

Answer 3

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

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

所以} #box没有任何匹配。当您移除}时，选择器为#box，并且匹配ID为＆＃34; box＆＃34;的元素。

如果您不想要在删除额外}时获得的效果，请删除整个规则。

Answer 4

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

尝试更改指向箭头的id，使用class，因为如果我们直接使用ID，就会有很多冲突。欲了解更多信息，请访问以下链接：

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

Answer 5

我认为与＃34; #fixed＆＃34;有关。 html和css中的id名称。尝试将名称更改为其他名称。该属性和您的名字可能会相互冲突。所以改变它......

我不小心把一个额外的花括号

5 个答案: