Css鏈接寬度變化點擊

我從頭開始編寫網頁，我遇到了問題。我知道我在使用iframe，但這不是重點，所以請不要說。Css鏈接寬度變化點擊

根據我對CSS/CSS3的瞭解，不在側邊欄中的鏈接（頁面內容中的鏈接）的樣式正確。但是，由於某種原因，當你點擊鏈接時，鏈接的寬度會發生變化，這是不需要的。然而，li,a:link和a:hover都有一個設定的寬度，所以我不知道這可能會發生。當你按住鼠標按鈕時，這也是有效的。

<head> 
    <title>BlackOwlStables</title> 
    <style> 
     body { 
      background: rgba(112, 111, 111, 1); 
      background: -moz-radial-gradient(center, ellipse cover, rgba(112, 111, 111, 1) 0%, rgba(5, 5, 5, 1) 100%); 
      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(112, 111, 111, 1)), color-stop(100%, rgba(5, 5, 5, 1))); 
      background: -webkit-radial-gradient(center, ellipse cover, rgba(112, 111, 111, 1) 0%, rgba(5, 5, 5, 1) 100%); 
      background: -o-radial-gradient(center, ellipse cover, rgba(112, 111, 111, 1) 0%, rgba(5, 5, 5, 1) 100%); 
      background: -ms-radial-gradient(center, ellipse cover, rgba(112, 111, 111, 1) 0%, rgba(5, 5, 5, 1) 100%); 
      background: radial-gradient(ellipse at center, rgba(112, 111, 111, 1) 0%, rgba(5, 5, 5, 1) 100%); 
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#706f6f', endColorstr='#050505', GradientType=1); 
     } 
     p { 
      font-family:times, serif; 
      color:#1a1a1a; 
      padding:10px; 
      margin:0; 
      font-size:12px; 
      letter-spacing:1px; 
      text-align:justify; 
     } 
     h1, h2, h3 { 
      font-family:times; 
      letter-spacing:2px; 
      font-size:30px; 
      color:#1a1a1a; 
      margin:0; 
      padding:0; 
     } 
     iframe { 
      width:650px; 
      height:700px; 
      border:1px solid #777777; 
     } 
     #content { 
      width:860px; 
      background:#888888; 
      border:1px solid black; 
      padding:20px; 
      position:relative; 
      margin:20px auto 0; 
     } 
     #body { 
      margin-left:210px; 
     } 
     #side { 
      width:200px; 
      float:left; 
      border-right:1px solid #666; 
      position:absolute; 
      top:10px; 
      bottom:10px; 
     } 
     ul#navbar { 
      list-style-type:none; 
      margin:0; 
      margin-left:-20px; 
      margin-top:30px; 
      padding:0; 
     } 
     #navbar li { 
      text-align:center; 
     } 
     #navbar a:link, a:visited, a:active { 
      transition: all 1s; 
      display:inline-block; 
      text-align:center; 
      text-decoration:none; 
      color:white; 
      text-transform:uppercase; 
      line-height:20px; 
      font-size:10px; 
      letter-spacing:3px; 
      max-width:50px; 
     } 
     #navbar a:hover { 
      transition:all 1s; 
      background:#0a0a0a; 
      max-width:180px; 
     } 
     #links { 
      list-style-type:none; 
      display:block; 
      width:390px; 
      margin:0 auto; 
      padding:0; 
     } 
     #links li { 
      text-align:center; 
      display:inline-block; 
      width:120px; 
      overflow:hidden; 
      margin:0; 
     } 
     #links a,a:link, a:active, a:visited, a:focus { 
      transition: all 1s; 
      display:inline-block; 
      text-align:center; 
      text-decoration:none; 
      color:white; 
      text-transform:uppercase; 
      line-height:20px; 
      font-size:10px; 
      letter-spacing:1px; 
      padding:0 2px; 
      width:120px; 
     } 
     #links a:hover { 
      transition:all 1s; 
      background:#0a0a0a; 
      width:120px; 
     } 
    </style> 
</head> 

<body> 
    <div id="content"> 
     <div id="side"> 
      <ul id="navbar"> 
       <li><a href="#">Text</a> 
       </li> 
       <li><a href="#">Text</a> 
       </li> 
       <li><a href="#">Text</a> 
       </li> 
       <li><a href="#">Text</a> 
       </li> 
      </ul> 
     </div> 
     <div id="body"> 
     <h2>title hurr</h2> 
      <p>Text</p> 
      <ul id="links"> 
       <li><a href="/mog.html" target="box">M. Oceangaze</a></li 
       ><li><a href="/lbh.html" target="box">L. Bloodhorn</a></li 
       ><li><a href="/apv.html" target="box">A. Poisonvine</a></li 
       ><li><a href="/vft.html" target="box">V. Flickertail</a></li 
       ><li><a href="" target="box">-air-</a></li 
       ><li><a href="" target="box">-water-</a></li 
       > 
      </ul> 
      <iframe name="box">Your browser does not support iframes.</iframe> 
      <p>2014 &copy; Brittny Baldwin</p> 
     </div> 
    </div> 
</body>

我只是想知道是什麼引起的不必要的寬度變化，我怎麼能解決這個問題。

編輯：不是NAVBAR。內部#links UL。

來源

2014-10-08 cirre

你會更容易得到一個很好的答案，如果你問題縮小到最簡單的形式，並張貼只有相關的代碼。在減少問題的過程中，您甚至可以自行找到解決方案。 – 2014-10-08 16:27:26

#navbar a:link, #navbar a:visited, #navbar a:active { 
    .... 
} 

#links a, #links a:link, #links a:active, #links a:visited, #links a:focus { 
    transition: all 1s; 
    display:inline-block; 
    text-align:center; 
    word-wrap: normal; 
    overflow-wrap: normal; 
    white-space: nowrap; 
    text-decoration:none; 
    color:white; 
    text-transform:uppercase; 
    line-height:20px; 
    font-size:10px; 
    letter-spacing:1px; 
    padding:0 2px; 
    width:120px; 
    margin-right:1px; 
}

來源

2014-10-08 16:43:55 AvrilAlejandro

這是我一直在尋找的。其他人都在看導航欄，這不是我所暗示的。謝謝。 – cirre 2014-10-08 18:26:36

這是您在#navbar a:link, a:visited, a:active中設置的max-width:50px;。更改或刪除它，它會工作

 #navbar a:link, a:visited, a:active { 
      transition: all 1s; 
      display:inline-block; 
      text-align:center; 
      text-decoration:none; 
      color:white; 
      text-transform:uppercase; 
      line-height:20px; 
      font-size:10px; 
      letter-spacing:3px; 
      max-width:50px; //<--THIS 
     }

UPDATE

爲showdev指出，最大寬度是出血了的原因是因爲你指定在一般a，一定要在範圍他們自己父：

#navbar a, #navbar a:link, #navbar a:active, #navbar a:visited, #navbar a:focus {

來源

2014-10-08 16:30:08 jmore009

問題是與以下重疊的定義：

下面，您正在設置訪問和活躍所有鏈接狀態：

#navbar a:link, a:visited, a:active { ... }

下面，你設置鏈接，活動，走訪，並集中所有鏈接狀態：

#links a, a:link, a:active, a:visited, a:focus { ... }

你需要指定父爲了避免兩個定義之間的重疊，例如：

#navbar a:link, #navbar a:visited, #navbar a:active { .... } #links a, #links a:link, #links a:active, #links a:visited, #links a:focus { .... }

WORKING EXAMPLE

來源

2014-10-08 16:32:37 showdev

Css鏈接寬度變化點擊

回答

相關問題