在<li>标记内未设置<a>样式，在检查CSS值的元素时显示无效属性值
在<li>标记内未设置<a>样式，在检查CSS值的元素时显示无效属性值
提问于 2018-07-09 08:56:42
不知道我到底做错了什么。但是我的样式根本没有显示，而是为我显示了所有赋值的“无效属性值”。
这里是和CSS:
HTML：
<div>
<img style="width: 40%" src="https://i.imgur.com/wNLc5fC.jpg">
<div>
<h2>Digital Assets For Creative Professionals</h2>
</div>
<div>
<ul>
<li>
<a href="" class="btn1">Photo</a>
</li>
<li>
<a href="" class="btn1">Video</a>
</li>
<li>
<a href="" class="btn1">Motion</a>
</li>
</ul>
</div>
</div>CSS:
h2 {
position: absolute;
z-index: 1;
top: 140px;
color: #FFF;
padding-left: 4%;
}
ul {
position: absolute;
z-index: 1;
top: 290px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
margin-left: 10em;
}
li {
float: left;
padding-right: 40px
}
a.btn1 {
display: inline-block;
padding: 0.3em 1.2em;
margin: 0 0.3em 0.3em 0;
border-radius: 2em;
box-sizing: border-box;
text-decoration: none;
font-weight: 300;
color: #FFFFFF;
background-color: #4eb5f1;
text-align: center;
transition: all 0.2s;
}
a.btn1:hover{
background-color: #4095c6;
}我很感谢这里的任何帮助或见解。
我最初认为这可能是浏览器的问题，但我没有看到任何奇怪的事情发生。我还在Firefox等其他浏览器上尝试过这段代码。仍然是同样的问题。
非常感谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-09 09:16:00
您的css不知道a.btn和a.btn:hover中的unicode。
我用空格替换了前面的字符
h2 {
position: absolute;
z-index: 1;
top: 140px;
color: #FFF;
padding-left: 4%;
}
ul {
position: absolute;
z-index: 1;
top: 290px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
margin-left: 10em;
}
li {
float: left;
padding-right: 40px
}
a.btn1 {
display: inline-block;
padding: 0.3em 1.2em;
margin: 0 0.3em 0.3em 0;
border-radius: 2em;
box-sizing: border-box;
text-decoration: none;
font-weight: 300;
color: #FFFFFF;
background-color: #4eb5f1;
text-align: center;
transition: all 0.2s;
}
a.btn1:hover{
background-color: #4095c6;
}<div>
<img style="width: 40%" src="https://i.imgur.com/wNLc5fC.jpg">
<div>
<h2>Digital Assets For Creative Professionals</h2>
</div>
<div>
<ul>
<li>
<a href="" class="btn1">Photo</a>
</li>
<li>
<a href="" class="btn1">Video</a>
</li>
<li>
<a href="" class="btn1">Motion</a>
</li>
</ul>
</div>
</div>
Stack Overflow用户
发布于 2018-07-09 09:09:46
如果文件css代码在另一个文件上，请确保您的链接没有语法错误，请确保在加载页面之前也保存了该文件。我使用html文件上的style标记测试了您的代码，并且运行良好。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51237108
复制相关文章
相似问题