Question

好的，这很难解释。如果您查看我在http://granthoneymoon.com/temp3.html放置的示例，您可以在徽标右侧看到4个导航按钮。

我想要的是导航按钮均匀分布在徽标右侧的空间中，随着浏览器窗口变小，按钮越来越靠近。但是，在某个时刻，一旦浏览器变得如此之小以至于按钮会重叠，它就会将整个菜单推到徽标下面。

现在我的按钮内嵌在徽标的右侧，但随着浏览器变小，它只是一次按下一个按钮到下一行而不是按钮靠近在一起。

有办法做到这一点吗？

Answer 1

按比例缩放按钮：例如

img.button{
       width:17%
       height :auto;
}

Answer 2

将此代码添加到CSS表的底部

使用@CSS媒体标记当屏幕达到宽度时，它会将#header ID更改为最大宽度627px：1077px

// CSS

@media screen and (max-width: 1077px) {
    #header{
        max-width: 627px;
    }
}

Answer 3

这是Flexbox创建的问题之一。

这是一个很好的入门资源： http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox的问题在于，因为它的新浏览器支持有限。查看哪些浏览器可以在此处使用它： http://caniuse.com/#search=flexbox

我在下面添加了评论来解释每条线路的用途。如果您有任何问题，请告诉我们！

/* on all elements, reset any browser
   added default margin and padding */
* { margin:0; padding:0 }


body {
  /* make it pretty */
  font-family: 'Palatino', serif;
  font-style: italic;
}


header {
  /* set flex-parent, makes direct
     children flex-children */
  display: -webkit-flex;
  display: flex;
  
  /* direct childen of the header
     should wrap */
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;

  /* make it pretty */
  background: darkblue;
}


header #logo {
  /* as a flex child, grow and
     shrink as needed, use base-width
     of 200px */
  -webkit-flex: 1 1 200px;
  flex: 1 1 200px;
  
  /* set logo height */
  height: 70px;
  
  /* make it pretty */
  background: lightgrey;
  
  /* make this element also a flex-parent */
  display: -webkit-flex;
  display: flex;
  
  /* direct childen (in this case, the :before)
     should be vertically centered inside of logo */
  -webkit-align-items: center;
  align-items: center;
  
  /* direct childen (in this case, the :before)
     should be horizontally centered inside of logo */
  -webkit-justify-content: center;
  justify-content: center;
}
header #logo:before {
  /* add descriptive text to this box */
  content: 'Logo';
}


header nav {
  /* as a flex child, grow and shrink as needed,
     use current width as base width */
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  
  /* change padding not to add to overall width */
  box-sizing: border-box;
  /* set left and right padding to 10% of
     available space */
  padding: 0 10%;
  
  /* make this element also a flex-parent */
  display: -webkit-flex;
  display: flex;
  
  /* direct childen (in this case, the links)
     should be vertically centered inside of this element */
  -webkit-align-items: center;
  align-items: center;

  /* direct childen (in this case, the links)
     should be horizontally centered inside of this element */
  -webkit-justify-content: space-around;
  justify-content: space-around;
}


header nav a {
  /* as a flex child, never ever grow and shrink,
     use curremt width as base width */
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  
  /* change padding not to add to overall width */
  box-sizing: border-box;

  /* hard code width and height */
  width: 50px;
  height: 50px;
  
  /* add 10px of margin to top, right, bottom, and left */
  margin: 10px;
  
  /* make it pretty */
  background: linear-gradient(cyan, blue);
  border-radius: 10%;
  border: 1px solid lightgrey;
  color: white;
  text-decoration: none;
  text-align: center;
  
  /* make this element also a flex-parent */
  display: -webkit-flex;
  display: flex;
  
  /* direct childen (in this case, the link text)
     should be vertically centered inside of this element */
  -webkit-align-items: center;
  align-items: center;
}

<header>
  <figure id="logo"></figure>
  <nav>
    <a href="">Link One</a>
    <a href="">Link Two</a>
    <a href="">Link Three</a>
    <a href="">Link Four</a>
  </nav>
</header>

可编辑演示：http://jsbin.com/zavawudaye/3

当屏幕改变大小时，如何使导航按钮保持在一起

3 个答案: