Question

我有一个菜单，该菜单是左侧公司徽标和右侧菜单列表。

1）当我将鼠标悬停在“联系我们”菜单上时，出现了一些问题。由于边框的缘故，它稍微偏向右侧。

2）在徽标中心显示菜单列表的方式是什么？

我也正在共享链接https://jsfiddle.net/Narendra2015/jmscoftq/

您能帮我解决这个问题吗？

#header_menu {
  background-color: #fff;
  /*position: fixed;top: 0;*/
  width: 100%;
  z-index: 900
}

#header_menu .main_header_menu {
  padding: 15px 50px;
}

#header_menu .main_header_menu .t_left_side_menu .t_header_logo {
  width: 200px;
}

#header_menu .main_header_menu .t_left_side_menu .t_header_logo img {
  width: 100%;
}

#header_menu .t_right_side_menu {
  vertical-align: middle;
  line-height: 60px;
}

#header_menu .t_right_side_menu ul {
  list-style: none;
}

#header_menu .t_right_side_menu ul.t_menu_list li {
  display: inline-block;
}

#header_menu .t_right_side_menu ul.t_menu_list li a {
  padding: 12px 30px;
  font-size: 18px;
  text-transform: uppercase;
  color: #343534
}

#header_menu .t_right_side_menu ul.t_menu_list li a:hover {
  color: #00a2ff;
  transition: 0.1s;
}

#header_menu .t_right_side_menu ul.t_menu_list li a.btn_bg {
  color: #000;
}

#header_menu .t_right_side_menu ul.t_menu_list li:last-child a {
  text-transform: capitalize;
}

#header_menu .t_right_side_menu ul.t_menu_list li:last-child a:hover {
  border: 1px solid red;
  background-color: #fff;
  color: red;
  transition: 0.3s;
  box-sizing: border-box;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<header id="header_menu">
  <div class="main_header_menu clearfix">
    <div class="t_left_side_menu pull-left">
      <div class="t_header_logo"><img src="http://1000logos.net/wp-content/uploads/2016/11/google-plus-logo.jpg" alt=""></div>
    </div>
    <!--i_left_side-->

    <div class="t_right_side_menu pull-right">
      <div class="t_right_main_menu">
        <ul class="t_menu_list">
          <li><a href="">Hoem</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Service</a></li>
          <li><a href="" class="contact_link btn_bg">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <!--right_side-->
  </div>
</header>

Answer 1

1）为防止将a颜色的“移动”边界设置为transparent

2）您使用vertical-align:middle;意味着您必须使用display:inline block

因此删除类pull-right和pull-left并设置display:inline block 到.t_right_side_menu和.t_left_side_menu

请参见此处：https://jsfiddle.net/jmscoftq/10/

#header_menu {
  background-color: #fff;
  /*position: fixed;top: 0;*/
  width: 100%;
  z-index: 900
}

#header_menu .main_header_menu {
  padding: 15px 50px;
}

#header_menu .main_header_menu .t_left_side_menu .t_header_logo {
  width: 200px;
}

#header_menu .main_header_menu .t_left_side_menu .t_header_logo img {
  width: 100%;
}
.t_left_side_menu{display: inline-block;}
#header_menu .t_right_side_menu {
  vertical-align: middle;
  line-height: 60px;
 display: inline-block;
}

#header_menu .t_right_side_menu ul {
  list-style: none;
}

#header_menu .t_right_side_menu ul.t_menu_list li {
  display: inline-block;
}

#header_menu .t_right_side_menu ul.t_menu_list li a {
  padding: 12px 30px;
  font-size: 18px;
  text-transform: uppercase;
  color: #343534
}

#header_menu .t_right_side_menu ul.t_menu_list li a:hover {
  color: #00a2ff;
  transition: 0.1s;
}

#header_menu .t_right_side_menu ul.t_menu_list li a.btn_bg {
  color: #000;
}

#header_menu .t_right_side_menu ul.t_menu_list li:last-child a {
  text-transform: capitalize;
  border: 1px solid transparent;
}

#header_menu .t_right_side_menu ul.t_menu_list li:last-child a:hover {
  border: 1px solid red;
  background-color: #fff;
  color: red;
  transition: 0.3s;
  box-sizing: border-box;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<header id="header_menu">
  <div class="main_header_menu clearfix">
    <div class="t_left_side_menu">
      <div class="t_header_logo"><img src="http://1000logos.net/wp-content/uploads/2016/11/google-plus-logo.jpg" alt=""></div>
    </div>
    <!--i_left_side-->

    <div class="t_right_side_menu">
      <div class="t_right_main_menu">
        <ul class="t_menu_list">
          <li><a href="">Hoem</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Service</a></li>
          <li><a href="" class="contact_link btn_bg">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <!--right_side-->
  </div>
</header>

Answer 2

->解决徽标的按钮悬停和菜单中心，请将以下代码设置为现有代码。

[]

#header_menu {
  background-color: #fff;
  width: 100%;
  z-index: 900
}
#header_menu .main_header_menu {
  padding: 15px 50px;
  display: flex;
  align-items: center;
}
#header_menu .main_header_menu .t_left_side_menu .t_header_logo {
  width: 200px;
}
#header_menu .main_header_menu .t_left_side_menu .t_header_logo img {
  width: 100%;
}
#header_menu .t_right_side_menu {
  flex-grow: 1;
  text-align: right;
}
#header_menu .t_right_side_menu ul {
  list-style: none;
  margin: 0;
}
#header_menu .t_right_side_menu ul.t_menu_list li {
  display: inline-block;
}
#header_menu .t_right_side_menu ul.t_menu_list li a {
  padding: 12px 30px;
  font-size: 18px;
  text-transform: uppercase;
  color: #343534
}
#header_menu .t_right_side_menu ul.t_menu_list li a:hover {
  color: #00a2ff;
  transition: 0.1s;
}
#header_menu .t_right_side_menu ul.t_menu_list li a.btn_bg {
  color: #000;
}
#header_menu .t_right_side_menu ul.t_menu_list li:last-child a {
  text-transform: capitalize;
  border: 1px solid transparent;
}
#header_menu .t_right_side_menu ul.t_menu_list li:last-child a:hover {
  border-color: red;
  background-color: #fff;
  color: red;
  transition: 0.3s;
  box-sizing: border-box;
}

Answer 3

为锚点添加透明边框。

只需添加：

border:1px solid transparent;

您的CSS声明：

#header_menu .t_right_side_menu ul.t_menu_list li:last-child a{text-transform: capitalize;border:1px solid transparent;}

菜单列表略微移至悬停右侧

3 个答案: