好的,这很难解释。如果您查看我在http://granthoneymoon.com/temp3.html放置的示例,您可以在徽标右侧看到4个导航按钮。
我想要的是导航按钮均匀分布在徽标右侧的空间中,随着浏览器窗口变小,按钮越来越靠近。但是,在某个时刻,一旦浏览器变得如此之小以至于按钮会重叠,它就会将整个菜单推到徽标下面。
现在我的按钮内嵌在徽标的右侧,但随着浏览器变小,它只是一次按下一个按钮到下一行而不是按钮靠近在一起。
有办法做到这一点吗?
答案 0 :(得分:0)
按比例缩放按钮:例如
img.button{
width:17%
height :auto;
}
答案 1 :(得分:0)
将此代码添加到CSS表的底部
使用@CSS媒体标记当屏幕达到宽度时,它会将#header ID更改为最大宽度627px:1077px
// CSS
@media screen and (max-width: 1077px) {
#header{
max-width: 627px;
}
}
答案 2 :(得分:0)
这是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>