Question

最近我一直在实施一个Button Group（最终）选择我正在开发的网站的语言，但我遇到了两个问题：

1 - Button组需要“float：left”才能连接按钮，而事情是...浮动使按钮组与其他导航项保持不对齐。

2 - 另一个问题是导航中存在某种属性，使我的按钮组具有这个巨大的矩形填充，这不应该发生...我已经检查过Chrome Inspector而我还没有找到任何东西我对此感到沮丧。

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

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

＆＃13;

$(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');
  }
})

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

任何帮助都会非常苛刻！

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;
  }

}

由于Float属性，Button Group不会与导航项保持对齐

1 个答案: