为啥我的导航标签会在悬停时移动？我该如何解决？我只想使用 css，
Posted
技术标签:
【中文标题】为啥我的导航标签会在悬停时移动？我该如何解决？我只想使用 css，【英文标题】：why does my nav tabs move on hover? How can i fix it? i want to use css only,为什么我的导航标签会在悬停时移动？我该如何解决？我只想使用 css， 【发布时间】：2016-03-24 02:42:21 【问题描述】：我正在使用引导网格概念。每当我将鼠标悬停在标签上时，它们都会移动，因此最终看起来很丑。此外，我的文字和小图像向前移动。
我只想使用 css 来解决这个问题
这是我的 html。
<section class="col-md-7">
<ul class="help-options">
<li class="speical-font">Need Help?</li>
<li><a href="#" class="red-text"><img src="images/btn_helpIcall.png" class="space" />CALL <span class="btn-black-text"> US</span></a></li>
<li><a href="#" class="blue-text"><img src="images/btn_helpIsubmititcket.jpg" /> SUBMIT <span class="btn-black-text"> TICKET</span></a></li>
<li><a href="#" class="green-text"><img src="images/btn_helpchat.png" /> LIVE <span class="btn-black-text"> CHAT</span></a></li>
<li><a href="#" class="purple-text"><img src="images/btn_helplearmore.png" /> LEARN <span class="btn-black-text"> MORE</span></a></li>
</ul>
<form class="form-inline">
<ul class="search-options" >
<section class="form-group">
<li><label for="person" class="speical-font">Find People:</label>
<input type"text" class="form-control input-box-width" name="person" placeholder="Joe Patric"/> </li>
<li><input name="search" class="form-control input-box-width" placeholder="Search"/><input class="search-btn" /></li>
<li><button type="button" class="btn btn-brown">ADVANCED <i class="fa fa-angle-right fa-lg"></i></button></li>
</section>
</ul>
</form>
</section>
CSS 代码从这里开始
.help-options > li, .search-options > section > li
list-style: none;
display:inline-block;
padding: 5px 5px 0 5px;
margin: 0;
.help-options > li >a > img
border-radius: 50%;
.space
padding-right: 5px;
.speical-font
font-family: 'Shadows Into Light', cursive;
font-weight: 700;
font-size: 14px;
letter-spacing: 2px;
.purple-text, .blue-text, .red-text, .green-text
color: #6d5793;
font-size: 11px;
text-decoration: none;
font-weight: 600;
.blue-text
color:#96D1CC;
.red-text
color:#B1172B;
.red-text > a:hover
text-decoration:none;
.green-text
color:#ACD275;
.btn-black-text
color: #000000;
.help-options > li > a
.help-options > li:nth-child(2) > a:hover, .help-options > li:nth-child(3) > a:hover, .help-options > li:nth-child(4) > a:hover, .help-options > li:nth-child(5) > a:hover
background-color:#ffffff;
text-decoration: none;
height:34px;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
padding:7px 7px 8px 0;
.help-options > li:nth-child(2) > a:hover
color:#B1172B;
.help-options > li:nth-child(3) > a:hover
color:#96D1CC;
.help-options > li:nth-child(4) > a:hover
color:#ACD275;
.help-options > li:nth-child(5) > a:hover
color: #6d5793;
【问题讨论】：
能否请您创建一个 sn-p 或现场演示？ 或者如果你能给我们原始代码的url 只需添加此代码 .help-options > li> a padding:7px 5px 8px 0; 修复它 【参考方案1】：编辑答案：
保持正常和悬停的填充相同
body
background: #cfcfcf;
.help-options > li,
.search-options > section > li
list-style: none;
display: inline-block;
padding: 5px 5px 0 5px;
margin: 0;
.help-options > li >a > img
border-radius: 50%;
.space
padding-right: 5px;
.speical-font
font-family: 'Shadows Into Light', cursive;
font-weight: 700;
font-size: 14px;
letter-spacing: 2px;
.purple-text,
.blue-text,
.red-text,
.green-text
color: #6d5793;
font-size: 11px;
text-decoration: none;
font-weight: 600;
padding: 7px 7px 8px 0;
.blue-text
color: #96D1CC;
.red-text
color: #B1172B;
.red-text > a:hover
text-decoration: none;
.green-text
color: #ACD275;
.btn-black-text
color: #000000;
.help-options > li > a .help-options > li:nth-child(2) > a:hover,
.help-options > li:nth-child(3) > a:hover,
.help-options > li:nth-child(4) > a:hover,
.help-options > li:nth-child(5) > a:hover
background-color: #ffffff;
text-decoration: none;
height: 34px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
padding: 7px 7px 8px 0;
.help-options > li:nth-child(2) > a:hover
color: #B1172B;
.help-options > li:nth-child(3) > a:hover
color: #96D1CC;
.help-options > li:nth-child(4) > a:hover
color: #ACD275;
.help-options > li:nth-child(5) > a:hover
color: #6d5793;
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<section class="col-md-7">
<ul class="help-options">
<li class="speical-font">Need Help?</li>
<li>
<a href="#" class="red-text">
<img src="images/btn_helpIcall.png" class="space" />CALL <span class="btn-black-text"> US</span>
</a>
</li>
<li>
<a href="#" class="blue-text">
<img src="images/btn_helpIsubmititcket.jpg" />SUBMIT <span class="btn-black-text"> TICKET</span>
</a>
</li>
<li>
<a href="#" class="green-text">
<img src="images/btn_helpchat.png" />LIVE <span class="btn-black-text"> CHAT</span>
</a>
</li>
<li>
<a href="#" class="purple-text">
<img src="images/btn_helplearmore.png" />LEARN <span class="btn-black-text"> MORE</span>
</a>
</li>
</ul>
<form class="form-inline">
<ul class="search-options">
<section class="form-group">
<li>
<label for="person" class="speical-font">Find People:</label>
<input type "text" class="form-control input-box-width" name="person" placeholder="Joe Patric" />
</li>
<li>
<input name="search" class="form-control input-box-width" placeholder="Search" />
<input class="search-btn" />
</li>
<li>
<button type="button" class="btn btn-brown">ADVANCED <i class="fa fa-angle-right fa-lg"></i>
</button>
</li>
</section>
</ul>
</form>
</section>【讨论】：
但如果我这样做，它不会涵盖整个内容，它只会涵盖文本。我希望悬停效果也能覆盖小图像，并匹配完整 的高度和宽度。那么还有其他方法吗？ 没明白你，什么涵盖什么？ 根据我发布的代码，悬停效果（白色背景）覆盖了整个 （即一个很小的 img 和一些文本）但是当我悬停时它会向前移动一点，所以我想要一个可以让白色背景覆盖img和文本的解决方案 这可行，但它不会占用边界半径，并且这些微小图像之间的空间会减少 你宁愿雇人来解决这个问题！你最初的问题是关于填充的，我帮你解决了这个问题。 SO 是关于帮助您不为您编写代码以上是关于为啥我的导航标签会在悬停时移动？我该如何解决？我只想使用 css，的主要内容，如果未能解决你的问题，请参考以下文章