Soru CSS vurgulu sınırı, satır içi elemanların biraz ayarlanmasını sağlar


Sırasız liste dolusu veya çapa var. Kenarlık ekleyen bir CSS: Vurgulu olayım var ancak soldaki tüm ankrajlar, genişlik ve otomatik ayarlamaya 1px eklediğinden, hover olduğunda hafifçe ayarlıyorum. Konumlandırmanın mutlak olduğundan nasıl emin olabilirim?

JS Fiddle yaptım İşte.


44
2017-12-24 17:00


Menşei


Sınırlamalar, hesaplamaların boyutlandırılması için sayılır. Dolayısıyla, 1 piksellik bir kenarlık eklerseniz, telafi etmek için yüksekliği / genişliğini 1px oranında küçültmeniz gerekir. - Marc B


Cevaplar:


Kenarlık belirdiğinde "atlama" durumundan kaçınmak için hover olmayan duruma şeffaf bir kenarlık ekleyebilirsiniz.

http://jsfiddle.net/TEUhM/3/

#homeheader a:visited, #homeheader a{
    border:1px solid transparent;
}

77
2017-12-24 17:06



Bu kazayla karşılaştım ve hiç kimsenin arka plan-klip içermediğine şaşırdım: padding-box; sınır ile: 1px katı şeffaf; css. Bu sorunu ele alırken iki girişi de dahil etmek için bir zorunluluktur. - Borgboy
FYI: (Herkesin aynı konuyla karşı karşıya olması durumunda), şeffaf bir arka plan eklemek, benim bootstrap nav haplarımda (aktif nav hapının farklı bir font rengine ve arka plan rengine sahip olduğu) farklı davrandı. Rgba kullanmak benim için çalıştı: border: 1px solid rgba(0, 0, 0, 0); Son 0 ise şeffaflık için. - Anupam


Ayrıca kullanabilirsiniz outlineBu, genişliği etkilemeyecek, yani "atlama" etkisi olmayacaktır. Ancak maalesef, yuvarlak bir taslak çizemezsiniz.


12
2017-12-24 17:22





1px'lik bir kenar boşluğu ekleyin ve bu kenar boşluğunu hoverde kaldırın, böylece kenarlıkla değiştirilir.

http://jsfiddle.net/TEUhM/4/


7
2017-12-24 17:05



güzel, teşekkürler. Korkarım ki js kullanmam gerekebilir :) - user1082764
Neyse ki bu neredeyse hiç gerekli değil. Ve sana değil, denemeye hazır. :) - GolezTrol


Bu tür işlevler için bir kenarlık yerine bir kutu gölgesi kullanabilirsiniz.

Bu, gölgenizin 'DOM'de boyut almaması' nedeniyle çalışır ve bu yüzden bir sınırın aksine konumlamayı etkilemez.

Gibi bir beyanı kullanmayı deneyin

box-shadow:0 0 1px 1px #102447;

senin yerine

border:1px solid #102447;

Vurgulu durumunuzda.

Aşağıda bu eylemin hızlı bir demosu:

DEMO

#homeheader a:visited,
#homeheader a {
  text-decoration: none;
  color: black;
  margin-right: 5px;
}
#homeheader a:hover {
  background-color: #D0DDF2;
  border-radius: 5px;
  box-shadow: 0 0 1px #102447;
}
#homeheader li {
  padding: 0;
  margin: 0px 10px;
  display: inline;
  font-size: 1em;
}
<div id="homecontainer">
  <div id="homeheader">
    <ul>
      <li><a href="#">this</a>
      </li>
      <li><a href="#">that</a>
      </li>
      <li><a href="#">this again</a>
      </li>
      <li><a href="#">that again</a>
      </li>
    </ul>
  </div>
</div>


7
2018-04-14 15:02





Kenarlıktan farklı olarak, kutu boyutunuzu değiştirmeyen kutu gölgesini kullanabilirsiniz.

İşte biraz öğretici.


3
2017-10-23 16:36





Sadece aşağıdaki kodu css dosyanıza ekleyin

#homeheader a {
    border:1px solid transparent;
}

3
2018-06-12 21:20





CSS "kutu boyutlandırma" özelliği Bu sorunu benim için çözdüm. Eğer elemanını verirsen

.class-name {
    box-sizing: border-box; 
}

Daha sonra sınırın genişliği eklenir. içeride tarayıcı genişliğini hesapladığında kutunun Bu şekilde, kenarlık stilini açıp kapattığınızda, öğenin boyutu değişmez (gözlediğiniz titremenin nedeni budur).

Bu yeni bir teknoloji, ancak sınır-kutu için destek oldukça tutarlı. Burada bir gösteri!


2
2018-01-12 19:33



  Bu, en zarif çözümdür. - gion_13