为什么我的导航标签会在悬停时移动？我该如何解决？我只想用css，

Question

我正在使用bootstrap网格概念。每当我将鼠标悬停在我的标签上时，它们都会移动，因此最终看起来很难看。此外，我的文字和小图片向前移动。

我想用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" alt="Call Us" />CALL <span class="btn-black-text"> US</span></a></li>
                                <li><a href="#" class="blue-text"><img src="images/btn_helpIsubmititcket.jpg" alt="Submit Ticket" /> SUBMIT <span class="btn-black-text"> TICKET</span></a></li>
                                <li><a href="#" class="green-text"><img src="images/btn_helpchat.png" alt="Live Chat" /> LIVE <span class="btn-black-text"> CHAT</span></a></li>
                                <li><a href="#" class="purple-text"><img src="images/btn_helplearmore.png" alt="Learn More" /> 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;
}

Answer 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" alt="Call Us" />CALL <span class="btn-black-text"> US</span>
      </a>
    </li>
    <li>
      <a href="#" class="blue-text">
        <img src="images/btn_helpIsubmititcket.jpg" alt="Submit Ticket" />SUBMIT <span class="btn-black-text"> TICKET</span>
      </a>
    </li>
    <li>
      <a href="#" class="green-text">
        <img src="images/btn_helpchat.png" alt="Live Chat" />LIVE <span class="btn-black-text"> CHAT</span>
      </a>
    </li>
    <li>
      <a href="#" class="purple-text">
        <img src="images/btn_helplearmore.png" alt="Learn More" />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>