Question

由于某种原因，nText类中唯一的CSS属性是内联显示和字体大小。边框属性，填充和文本修饰不会响应更改。代码如下：

<!DOCTYPE html>
<html>
<head>
<title>Ted's Lawn Care</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
    <a href="index.html"> <img id="headText" src="headerLeftImage.jpg"/>
    <img id="headImage" src="headerImage.jpg"/></a>         
</div>
<div id="navbar">
    <img id="navImage" src="navBackground.jpg"/>
    <div id="navText">
        <p class="nText" id="home"><a href="index.html">Home</a></p>
        <p class="nText" id="services"><a href="services.html">Services</a></p>
        <p class="nText" id="rates"><a href="rates.html">Rates</a></p>
        <p class="nText" id="contact"><a href="contact.html">Contact Us</a></p>
        <p class="nText" id="about"><a href="about.html">About</a></p>
    </div>
</div>
</body>
</html>

CSS：

 *{-webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
      box-sizing: border-box;

}
#header{
background-color: #BDB76B;
height: 20%;
width: 100%;
position: absolute;
left: 0; top: 0; bottom: 0; right: 0;
border-bottom: 10px;
border-top: 0;
border-left: 0;
border-right: 0;
border-color: black;
border-style: solid;
}
#headText{
position: relative;
float: left;
height: 100%;
width: 15%
}
#headImage{
position: relative;
float: right;
height: 100%;
width: 85%;
}
#navImage{
background-color: #66CD00;
width: 100%;
height: 8%;
position: absolute;
top: 20%; left: 0; right: 0;
}
#navBar{
width: 100%;
height: 8%;
position: absolute;
top: 20%; left: 0; right: 0;
}
#navText{
z-index: 1;
position: absolute;
top: 20%; left: 0; right: 0;
text-align: center;
}
.nText{
display: inline;
border-width: 2px;
border-color: #9ACD32;
border-top-left-radius: 5px;
border-top-right-radius: 80px;
font-size: 2em;
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;`
}

感谢您的帮助。

Answer 1

你要做的只是边框样式，没有边框属性不起作用

.nText{
border-style: solid;
}

Answer 2

请点击此处查看更正http://jsfiddle.net/16qx41k2/1/

有一个错字。

你在css中用camel case写了你的id。它区分大小写。变化

#navBar {
...
}

到

#navbar {
...
}

同样的规则适用于所有地方。

对于边框，如果要查看边框，则必须添加border-style: solid。您当然可以使用其他样式，例如border-style:dashed。

Answer 3

定义您的nText inline-block; border-style:solid和您的链接文字 display:inline-block;和text-decoration none;

就像这样

    .nText{
    display: inline-block;
        vertical-align:top;
border-style: solid;
    }
    .nText a{
        display:inline-block;
        vertical-align:top;
        text-decoration:none;
    }

在 css 中

和更正 id将此#navBar更改为此#navbar

Demo

*{-webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
      box-sizing: border-box;

}
#header{
background-color: #BDB76B;
height: 20%;
width: 100%;
position: absolute;
left: 0; top: 0; bottom: 0; right: 0;
border-bottom: 10px;
border-top: 0;
border-left: 0;
border-right: 0;
border-color: black;
border-style: solid;
}
#headText{
position: relative;
float: left;
height: 100%;
width: 15%
}
#headImage{
position: relative;
float: right;
height: 100%;
width: 85%;
}
#navImage{
background-color: #66CD00;
width: 100%;
height: 8%;
position: absolute;
top: 20%; left: 0; right: 0;
}
#navbar{
width: 100%;
height: 8%;
position: absolute;
top: 20%; left: 0; right: 0;
}
#navText{
z-index: 1;
position: absolute;
top: 20%; left: 0; right: 0;
text-align: center;
}
.nText{
display: inline-block;
    vertical-align:top;
    border-style:solid;
border-width: 2px;
border-color: #9ACD32;
border-top-left-radius: 5px;
border-top-right-radius: 80px;
font-size: 2em;
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;`
    
}
.nText a{
    display:inline-block;
    vertical-align:top;
    text-decoration:none;
}

<div id="header">
    <a href="index.html"> <img id="headText" src="headerLeftImage.jpg"/>
    <img id="headImage" src="headerImage.jpg"/></a>         
</div>
<div id="navbar">
    <img id="navImage" src="navBackground.jpg"/>
    <div id="navText">
        <p class="nText" id="home"><a href="index.html">Home</a></p>
        <p class="nText" id="services"><a href="services.html">Services</a></p>
        <p class="nText" id="rates"><a href="rates.html">Rates</a></p>
        <p class="nText" id="contact"><a href="contact.html">Contact Us</a></p>
        <p class="nText" id="about"><a href="about.html">About</a></p>
    </div>
</div>

HTML中的Navbar类不会显示一些CSS属性

3 个答案: