相关疑难解决方法(0)

可能重复:
CSS悬停边框使内联元素稍微调整

我有一行,我正在悬停时应用背景突出显示.

.jobs .item:hover {
    background: #e1e1e1;
    border-top: 1px solid #d0d0d0;
}

然而,随着边境增加了1px的额外的元素,它使得"移动".我如何在这里补偿上述动作(不使用背景图像)？

我的li风格如下:

li{
    display:inline-block;
    padding:5px;
    border:1px solid none;
}
li:hover{
    border:1px solid #FC0;
}

当我将鼠标悬停在li边界上时,不会li转移.是否有可能出现不可见的"边界"？

我想为div绘制一个边框,而不占用任何额外的空间？,这意味着边框必须在div内.

我添加了输入文本获得焦点时的样式。然后，每次文本框获得/失去焦点时，下面的所有其他元素都会移动。

input[type=text]:focus {
  border: 3px solid #555;
  outline-offset: 0;
}

<input id="CodPostal" name="CodPostal" type="text" value placeholder="focus here">
<br/> text
<br/>
<input id="Name" name="Name" type="text" value>

我用谷歌搜索并尝试outline-offset: 0;但没有用

我想在悬停时向div添加边框，但是添加边框时div会稍微变糟。这是一个众所周知的问题，常见的解决方案是添加透明边框。（例如）但是，我的div中有一个带有一些文本的图像，并且我希望该图像占整个div的宽度。添加透明边框将使背景色显示出来，并且不会占据整个宽度。

HTML：

<div class="outer-container">
  <div class="inner-container" contenteditable="true">
    <img src="./testing.png">
    some other text
  </div>
</div>

CSS：

.outer-container {
  width: 100%;
  background: #000000
}
.inner-container {
  margin: auto;
  width: 300px;
  margin-bottom: 0px;
  background: #FF0000;
  border: 1px solid transparent;
}
.inner-container:hover {
  border: 1px solid blue;
}

jsfiddle进行演示

div的高度在实际使用中是可变的，因为它是由用户上传的。我知道我可以用javascript解决问题，但是有没有办法我只能用CSS达到预期的效果？

我目前正在研究一个包含单选按钮和标签的 div 元素。它看起来像这样：

当鼠标悬停在 div 元素上时，我向该 div 应用边框，因此结果如下所示：

这里的问题是，当边框可见时，您可以看到元素由于边框大小而向下和向右移动 2px。边框大小为 2px。

我怎样才能防止这种情况发生？

这是我正在使用的相关CSS：

.container {
  display: inline-flex;
  align-items: center;
}

.label {
  display: inline-block;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 15px;
}

.radioButton {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 2px solid white;
  margin: 0;
  appearance: none;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 0 0 2px #002750;
  transition: all ease-in 0.2s;
}

.radioButton:checked {
  background-color: #002750;
}

.radioButton:focus,
.radioButton:hover {
  box-shadow: 0 0 0.15em 0.2em #0c64e7;
}

.container:focus, …