Question

第一个问题是我在大学的第一年，我可能因球错误而愚蠢。但是，当我尝试将a:selected设置为与li:hover相同的长度时，a：selected似乎偏离了几个像素。我一直在弄乱垫子，但仍然没有运气。使用我的CSS或技术问题/浏览器解释它的具体原因是什么？

这是我的CSS：

a {
  font-family: Armata;
}
body {
  background-image: url(http://i.imgur.com/26DXP2k.png);
  background-repeat: repeat;
  background-position: fixed;
}
#siteNavigation {
  width: 100%;
  margin: 55px 0px;
  padding: 0px 0px 0px;
  text-align: center;
}
#siteNavigation li:hover {
  padding: 0px 0px;
  background-color: #E03A00;
  border-top: 10px solid #E03A00;
  border-bottom: 3px solid #BDBFBE;
  text-transform: uppercase;
  color: #BDBFBE;
}
#siteNavigation a:hover {
  color: #BDBFBE;
  padding: 10px 45px;
}
#siteNavigation ul {
  margin-top: 0px;
  color: inherit;
}
#siteNavigation li {
  margin: 0px;
  padding: 0px 0px;
  display: inline;
  list-style: none;
  color: #E03A00;
  background-color: #BDBFBE;
  border-bottom: 3px solid #E03A00;
  border-top: 6px solid #BDBFBE;
  border-left: 1px solid black;
  border-right: 1px solid black;
}
#siteNavigation a {
  margin: 0px;
  padding: 0px 45px;
  display: inline;
  text-decoration: none;
  color: #E03A00;
}
#siteNavigation #selected a {
  margin: 0px;
  padding: 0px 45px;
  background-color: #E03A00;
  border-top: 10px solid #E03A00;
  border-bottom: 3px solid #BDBFBE;
  text-transform: uppercase;
  color: #BDBFBE;
}

这是HTML：

<!doctype html>
<head>
    <title>First Web page</title>
        <meta charset="utf-8" />
        <meta name="author" content="Matthew Sharp" />
        <meta name="description" content="Index page" />
        <link href="http://fonts.googleapis.com/css?family=Armata%7cLobster%7cRoboto%7cPontano+Sans" rel="stylesheet" type="text/css">
        <link href="main.css" rel="stylesheet" type="text/css">
        <!-- Grey Color's {Light to dark}: 
            FCFFFD
            E3E5E4
            BDBFBE
            7E7F7F
            3F403F 
            ORANGE: E03A00 //Comment used for personal use due to non saved kuler -->   
    </head>
    <body>
        <nav id="siteNavigation">
     <ul>
         <li>
             <a href="index.html">Home</a>
         </li>
         <li id="selected">
             <a href="">Structure</a>
         </li>
         <li>
             <a href="commonElements.html">Common Elements</a>
         </li>
         <li>
             <a href="cssSelectors.html">CSS Selectors</a>
         </li>
         <li>
             <a href="commonCss.html">Common CSS</a>
         </li>
     </ul>

</nav>

    <section id="bodyLayer">


    </body>

结果可以在这里看到： enter image description here

干杯。

Answer 1

JSFiddle

中的解决方案

基本上，当您要将selected标记应用于a标记时，问题是您将li CSS应用于a标记。

li标记根据边距和填充捕获文本及其周围的小区域，但实际的“单元格”由selected标记表示，因此您可以在此处应用#siteNavigation #selected a { /*should be #siteNavigation li#selected*/ margin: 0px; padding: 0px 45px; background-color: #E03A00; border-top: 10px solid #E03A00; border-bottom: 3px solid #BDBFBE; text-transform: uppercase; color: #BDBFBE; } CSS。

border-top

我还整理了一些CSS，比如删除了不必要的填充，selected的{{1}}太厚了，并添加了这个：

#siteNavigation #selected a{
  color: #BDBFBE;
}

所以文字颜色是正确的。

检查JSFiddle的详细答案。

Answer 2

以下是导航的清理版本：

演示：http://jsfiddle.net/rxh17e3h/

使用float:left代替display:inline-block

使用class="selected"而不是id

控制li中的所有内容。不要将悬停指定给a标记

a {
  font-family: Armata;
}
body {
  background-image: url(http://i.imgur.com/26DXP2k.png);
  background-repeat: repeat;
  background-position: fixed;
}
#siteNavigation {
  width: 100%;
  margin: 55px 0px;
  padding: 0px 0px 0px;
  text-align: center;
}

#siteNavigation ul {
  margin-top: 0px;
  color: inherit;
}

#siteNavigation li {
float:left;
margin: 0px;
padding: 0px 0px;
list-style: none;
  border-bottom: 3px solid #E03A00;
  border-top: 6px solid transparent;
  border-left: 1px solid black;
  border-right: 1px solid black;
  background-color: #BDBFBE;
  color: #E03A00;
}

#siteNavigation li a{
    padding: 10px 45px;
      color:inherit;  
    text-decoration: none;
}

#siteNavigation li:hover, #siteNavigation li.selected{
    color: #BDBFBE;
    background-color: #E03A00;
    border-top: 6px solid #E03A00;
    border-bottom: 3px solid #BDBFBE;
}

Answer 3

问题在于，您只需在

标记上执行操作，并期望其行为方式与标记上的相同操作相同。很简单，这两个标签在页面上保持不同的空间。

包含您的代码。

因此将行为应用于其中一个。有些人只是将标记定位为：hover a：selected etc其他人将目标li。每当我遇到这样的问题时，我只需注释掉维度代码并取消注释，直到出现错误或只使用firebug。

为什么我的CSS样式没有正确匹配？

3 个答案: