由于浮动属性，按钮组未与导航项保持对齐

Question

最近我一直在实施一个按钮组来（最终）select 我正在开发的网站的语言，但我遇到了 2 个问题：

1 – 按钮组需要“float:left”才能连接按钮，问题是……浮动使按钮组与其他导航项不对齐。

2 – 另一个问题是导航中有某种属性使我的按钮组有这个巨大的矩形填充，这不应该发生......我已经检查了 Chrome Inspector 和我什么都没发现，我对此感到非常沮丧。

总而言之，我希望我的导航栏看起来像这样：

下面是我实现代码的方式：

$(document).ready(function() {
  $(".menu-icon").on("click", function() {
    $("nav ul").toggleClass("showing");
  });
});

// Scrolling Effect

$(window).on("scroll", function() {
  if ($(window).scrollTop()) {
    $('nav').addClass('black');
  } else {
    $('nav').removeClass('black');
  }
})

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  font-family: "Helvetica Neue", sans-serif;
  font-weight: lighter;
}

header {
  width: 100%;
  height: 100vh;
  background: url(hero.jpg) no-repeat 50% 50%;
  background-size: cover;
}

.content {
  width: 94%;
  margin: 4em auto;
  font-size: 20px;
  line-height: 30px;
  text-align: justify;
}

.logo {
  line-height: 60px;
  position: fixed;
  float: left;
  margin: 16px 46px;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 2px;
}

nav {
  position: fixed;
  width: 100%;
  line-height: 60px;
}

nav ul {
  line-height: 60px;
  list-style: none;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
  color: #fff;
  padding: 0;
  text-align: right;
  margin: 0;
  padding-right: 40px;
  transition: 1s;
}

nav.black ul {
  background: #000;
}

nav ul li {
  display: inline-block;
  padding: 16px 40px;
  ;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
}


/*Button Group Starts here*/

div.btn-group a {
  background-color: transparent;
  /* transparent background */
  border: 1px solid white;
  /* transparent border */
  color: white;
  /* White text */
  cursor: pointer;
  /* Pointer/hand icon */
  padding: 7px 7px;
  margin: 0;
  float: left;
}

.selected-lang {
  background-color: #c1b882 !important;
  color: white !important;
}


/* Clear floats (clearfix hack) */

.btn-group:after {
  clear: both;
}

.btn-group a:not(:last-child) {
  border-right: none;
  /* Prevent double borders */
}


/* Add a background color on hover */

.btn-group a:hover {
  background-color: #c1b882;
  color: white;
}

.menu-icon {
  line-height: 60px;
  width: 100%;
  background: #000;
  text-align: right;
  box-sizing: border-box;
  padding: 15px 24px;
  cursor: pointer;
  color: #fff;
  display: none;
}

@media(max-width: 786px) {
  .logo {
    position: fixed;
    top: 0;
    margin-top: 16px;
  }
  nav ul {
    max-height: 0px;
    background: #000;
  }
  nav.black ul {
    background: #000;
  }
  .showing {
    max-height: 34em;
  }
  nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 24px;
    text-align: center;
  }
  .menu-icon {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font- 
      awesome/4.7.0/css/font-awesome.min.css">
</script>
<div class="wrapper">
  <header>

    <nav>

      <div class="menu-icon">
        <i class="fa fa-bars fa-2x"></i>
      </div>

      <div class="logo">
        LOGO
      </div>

      <div class="menu">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact</a></li>
          <li>
            <div class="btn-group">
              <a href="#" class="selected-lang">EN</a>
              <a href="index.html">PT</a>
            </div>
          </li>
        </ul>
      </div>
    </nav>

  </header>

  <div class="content">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
</div>

我们将不胜感激任何帮助！

Answer 1

您可以删除 float:left 属性而不是在按钮组的最后一个元素中使用 position:relative; 它不会在大小观点中引起任何问题。

我必须稍微更改一下您的 CSS，它可能对您有用。 :)

找到下面的代码：

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  font-family: "Helvetica Neue",sans-serif;
  font-weight: lighter;
}

header {
  width: 100%;
  height: 100vh;
  background: url(hero.jpg) no-repeat 50% 50%;
  background-size: cover;
}

.content {
  width: 94%;
  margin: 4em auto;
  font-size: 20px;
  line-height: 30px;
  text-align: justify;
}

.logo {
  line-height: 60px;
  position: fixed;
  float: left;
  margin: 16px 46px;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 2px;
}

nav {
  position: fixed;
  width: 100%;
  line-height: 60px;
  background: black;
}

nav ul {
  line-height: 60px;
  list-style: none;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
  color: #fff;
  padding: 0;
  text-align: right;
  margin: 0;
  padding-right: 40px;
  transition: 1s;
}

nav.black ul {
  background: #000;
}

nav ul li {
  display: inline-block;
  padding: 16px 40px;;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
}

/*Button Group Starts here*/

div.btn-group a {
background-color: transparent; /* transparent background */
border: 1px solid white; /* transparent border */
color: white; /* White text */
cursor: pointer; /* Pointer/hand icon */
padding: 7px 7px;
margin: 0;
}

.selected-lang{
background-color: #c1b882 !important;
color: white !important;
}

/* Clear floats (clearfix hack) */
.btn-group:after {
clear: both;
}

.btn-group a:not(:last-child) {
border-right: none; /* Prevent double borders */
position: relative;
    right: -5px;
}

/* Add a background color on hover */
.btn-group a:hover {
background-color: #c1b882;
color: white;
}


.menu-icon {
  line-height: 60px;
  width: 100%;
  background: #000;
  text-align: right;
  box-sizing: border-box;
  padding: 15px 24px;
  cursor: pointer;
  color: #fff;
  display: none;
}

@media(max-width: 786px) {

  .logo {
        position: fixed;
        top: 0;
        margin-top: 16px;
  }

  nav ul {
        max-height: 0px;
        background: #000;
  }

  nav.black ul {
        background: #000;
  }

  .showing {
        max-height: 34em;
  }

  nav ul li {
        box-sizing: border-box;
        width: 100%;
        padding: 24px;
        text-align: center;
  }

  .menu-icon {
        display: block;
  }

}

由于浮动属性，按钮组未与导航项保持对齐

Button Group doesn't stay aligned with nav items due to Float property

html

css

buttongroup

由于浮动 属性，按钮组未与导航项保持对齐

Button Group doesn't stay aligned with nav items due to Float property

html

css

buttongroup

由于浮动属性，按钮组未与导航项保持对齐