好吧，我正在学习 html 和 css，所以我对此比较陌生。我关注了许多 youtube 视频来创建不同的布局。但是，我在遵循这个特定教程时遇到了真正的麻烦(https://www.youtube.com/watch?v=Wwe2zOz030o)。 在本教程中，它展示了如何使用 css 过渡效果制作一个非常酷的导航栏，但是，当调整窗口大小并且我将鼠标悬停以展开一个 div 时，它将所有其他 div 移动到页面下方。无论窗口大小如何，我都希望 div 始终保留在容器中。我希望这真的很简单...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
@import url("styles.css");
</style>
</head>
<body>
<div id="container">
<a href="#"><div class="menu">
<p class="p1">HOME</p>
<p class="p2">THIS IS OUR INTRO </p>
</div>
</a>
<div class="menu1">
<p class="p1">GALLERY</p>
<p class="p2">THIS IS MY PHOTOGRAPHY GALLERY</p>
</div>
<div class="menu2">
<p class="p1">ART PROJECTS</p>
<p class="p2">MY ART COLLECTION</p>
</div>
<div class="menu3">
<p class="p1">CONTACT</p>
<p class="p2">CONTACT ME</p>
</div>
</div>
</body>
</html>
CSS 样式是...
a{text-decoration:none;
}
#container{
height: 125px;
width: auto;
background-color:rgba(0,0,0,1);
position: relative;
}
.menu{
height: 125px;
width: 150px;
background-color: rgba(139,62,181,1);
float: left;
transition: all .5s ease-in-out 0s;
}
.menu1{
height: 125px;
width: 150px;
background-color: rgba(255,153,0,1);
float: left;
transition: all .5s ease-in-out 0s;
}
.menu2{
height: 125px;
width: 150px;
background-color: rgba(53,108,255,1);
float: left;
transition: all .5s ease-in-out 0s;
}
.menu3{
height: 125px;
width: 150px;
background-color: rgba(154,44,21,1);
float: left;
transition: all .5s ease-in-out 0s;
}
.p1{
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
color: rgba(255,255,255,.7);
font-weight: bold;
position: relative;
width: 100px;
top: 0px;
left: 15px;
transition:all .2s ease-in-out 0s;
}
.p2{
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color: rgba(255,255,255,.5);
position:relative;
top:0px;
left: 11px;
transition:all .2s ease-in-out 0s;
}
.menu:hover{
width:900px;
}
.menu1:hover{
width:900px;
}
.menu2:hover{
width:900px;
}
.menu3:hover{
width:900px;
}
.menu:hover .p1{
color:rgba(255,255,255,1);
}
.menu:hover .p2{
color:rgba(255,255,255,1);
}
.menu1:hover .p1{
color:rgba(255,255,255,1);
}
.menu1:hover .p2{
color:rgba(255,255,255,1);
}
.menu2:hover .p1{
color:rgba(255,255,255,1);
}
.menu2:hover .p2{
color:rgba(255,255,255,1);
}
.menu3:hover .p1{
color:rgba(255,255,255,1);
}
.menu3:hover .p2{
color:rgba(255,255,255,1);
}
最佳答案
使用“flexbox”是一个很好的案例。
请查看您的代码，其中已实现 flexbox:
http://codepen.io/Nargus/pen/uymsI
我只添加了 display: flex; 和 overflow:hidden; 到#container。
还为每个菜单项添加了 min-width(与宽度相同)，以便 flexbox 知道它的限制。
.menu*:hover 的宽度可以随心所欲，所有多余的部分将由 flexbox 本身削减。
Flexbox 在所有现代浏览器上都可以:http://caniuse.com/#feat=flexbox
关于css - 过渡扩展菜单 div 在导航栏中扩展，但在调整窗口大小时将其他菜单 div 向下推，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26129723/