Css ссылки ширина изменить по-щелчку

Я кодирую веб-страницу с нуля, и у меня возникла проблема. Я знаю, что использую iframes, но это не так, поэтому, пожалуйста, оставьте это.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>

Я хотел бы знать, что вызывает нежелательное изменение ширины и как я могу это исправить.

EDIT: NOT THE NAVBAR. ВНУТРЕННИЙ #links UL.

источник

2014-10-08 cirre

вы будете более вероятно, чтобы получить хороший ответ, если вы свести проблему к своей простейшей форме и размещать только соответствующий код. в процессе сокращения проблемы вы можете даже найти решение самостоятельно. –

#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

это max-width:50px;, который вы установили в #navbar a:link, a:visited, a:active. изменить это или удалить его, и он будет работать

 #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 ссылки ширина изменить по-щелчку

ответ

Смежные вопросы