所以我搜索了其他主题,但没有找到答案。在我看来,我的问题有点奇怪。我试图为我的导航链接做大约10px到15px的字间距。当我通过打开索引文件在本地测试页面时,它可以工作。但是,一旦我将其上传到cpanel,它就无法正常工作。
CSS:
/* Body and Container Styles */
body {
background - color: #C8C8C6;
min - width: 50 % ;
}
container {
margin - left: auto;
margin - right: auto;
width: 100 % ;
min - width: 1340px;
}
/* Div styles */
div {
border - radius: 10px;
overflow: visible;
}
.navigation {
word - spacing: 15px;
height: 30px;
background - color: #66CCFF;
margin-top: 5px;
margin-right: 150px;
margin-bottom: 5px;
margin-left: 150px;
border: 1px solid;
border-color: # FFCC66;
overflow: visible;
min - width: 800px;
min - height: 30px;
}
ul {
list - style - type: none;
margin - top: 2px;
margin - bottom: 5px;
padding: 0;
font - size: x - large;
}
li {
display: inline;
}
.left {
background - color: #FFCC66;
border: 2px dashed;
border - color: #66CCFF;
margin-top:10px;
height: 250px;
width: 100px;
min-height: 500px;
min-width: 200px;
float:left;
overflow: visible;
}
.right{
display: inline-block;
background-color: # FFCC66;
border: 2px dashed;
border - color: #66CCFF;
margin-top:10px;
height: 500px;
width: 200px;
min-height: 250px;
min-width: 100px;
float: right;
overflow: visible;
}
.middle {
display: inline-block;
margin-left: 5%;
background-color: # FFCC66;
border: 2px dashed;
border - color: #66CCFF;
margin-top:10px;
height: 500px;
width: 800px;
min-height: 250px;
min-width: 400px;
overflow: scroll;
}
/* footer style */
footer {
height: 20px;
background - color: # 66CCFF;
margin - top: 10px;
margin - right: 150px;
margin - bottom: 5px;
margin - left: 150px;
border: 1px solid;
border - color: #FFCC66;
overflow: visible;
}
footer p {
margin: auto;
margin - top: 2px;
margin - left: 5px;
font - size: x - small;
text - align: left;
}
/* Media styles */
embed {
margin - top: 20px;
}
/* Heading Styles */
h1 {
text - align: center;
font - family: Impact,
Charcoal,
sans - serif;
}
/* link styles */
a: link {
text - decoration: none;
}
a: visited {
color: white;
}
a: hover {
color: #C8C8C6;
}
/* Paragraph and Text styles */
p {
text - align: center;
}
/* Scrollbar */
::-webkit - scrollbar {
width: 10px;
}
::-webkit - scrollbar - track {
-webkit - box - shadow: inset 0 0 6px rgba(200, 200, 198, 1);
border - radius: 7px;
}
::-webkit - scrollbar - thumb {
border - radius: 7px; - webkit - box - shadow: inset 0 0 6px rgba(71, 211, 255, 1);
}
答案 0 :(得分:2)
它无效的原因是因为您使用的是<center>
元素。这个元素已经过时了。您应该使用CSS来确定它的位置(您可以将text-align: center;
放在.navigation
上。)不要使用过时的元素。完成后,word-spacing
工作正常。
http://validator.w3.org/和http://jigsaw.w3.org/css-validator/有助于检查您的网页是否存在人类容易错过的语法错误。它们是开发网站的人们非常宝贵的工具。