问题描述
我正在尝试使我的标题/横幅(最终将输入到 SharePoint 母版页)具有响应性。我为标题设置了高度,通常如果我要做出任何响应,我会将高度设置为自动。
我正在使用 flex 来包含横幅内的信息。当我切换设备仿真并使窗口变小时,标题会向右推并最终与右侧的图像一起隐藏。
我想让它当视口缩小到足够小时,所有标题都包含在手风琴的线条中,或者创建我自己的按钮(下拉菜单),其样式与手风琴相同。我需要使用 :before 还是 :after 。
这样的东西(在小视口中包含所有标题/锚点):
这是我的原始片段和Fiddle:
body {
font-family: Arial,Helvetica,sans-serif;
}
.armylogo{
float: left;
justify-content: center;
height: 95%;
bottom: 0;
width: auto;
vertical-align: baseline;
}
.armylogo2{
float: right;
justify-content: center;
height: 95%;
bottom: 0;
width: auto;
vertical-align: baseline;
}
.navbar {
overflow: hidden;
background-color: #104723;
height: 94px;
width: 100%;
text-align: right;
float: left;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
vertical-align: center;
}
.dropdown {
float: left;
overflow: hidden;
vertical-align: center;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,.dropdown:hover .dropbtn {
background-color: #104723;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
Box-shadow: 0px 8px 16px 0px rgba(0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<Meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Military_service_mark_of_the_United_States_Army.png" class="armylogo"/>
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#test1">Test 1</a>
<a href="#test2">Test 2</a>
<a href="#test3">Test 3</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Military_service_mark_of_the_United_States_Army.png" class="armylogo2"/>
</div>
这是来自答案的更新版本(仍然无效)
.navbar {
/* overflow: hidden; */ /* not needed */
background-color: #104723;
height: 94px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap; /* possibly leave out to keep both logos visible for narrow views */
}
.armylogo,.armylogo2 {
height: 95%;
/* bottom: 0; they should just sit in space */
padding: 0 2px; /* keep logo from touching edge */
width: auto;
}
.navbar a {
font-size: 16px;
color: #fff; /* use one type of color values */
padding: 14px 16px;
text-decoration: none;
}
body {
font-family: Arial,sans-serif;
}
@media only screen and (max-width: 600px) {
.newDiv {
width:50%;
display:flex;
flex-wrap:wrap;
}
}
.navbar a {
font-size: 16px;
color: #fff; /* use one type of color values */
padding: 14px 16px;
text-decoration: none;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
vertical-align: center;
}
.dropdown {
float: left;
overflow: hidden;
vertical-align: center;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Military_service_mark_of_the_United_States_Army.png" class="armylogo"/>
<div class="newDiv">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#test1">Test 1</a>
<a href="#test2">Test 2</a>
<a href="#test3">Test 3</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Military_service_mark_of_the_United_States_Army.png" class="armylogo2"/>
</div>
解决方法
您可以将这部分组件包装在一个 div 中,然后您可以在媒体查询中将此属性赋予该 div。
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#test1">Test 1</a>
<a href="#test2">Test 2</a>
<a href="#test3">Test 3</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
同样对于你的 a 元素和 .dropdown 你应该在媒体查询中给出 width:%50 那么它们总共是 3 行和 2 列。当然,您也可以在媒体查询中更改字体大小或其他特征。
@media only screen and (max-width: 600px) {
.newDiv {
width:100%;
display:flex;
flex-wrap:wrap;
}
}
,
同意@EvrenK 的观点。关于 ::before
和 ::after
伪元素需要注意的一件事是您不能附加事件。所以真正的样式按钮将是最好的方法,也是最好的语义。
有点跑题,但注意到您的样本的一些一般情况。一种可能有帮助的做法是对您的选择器进行分组,同时您还有一些奖励声明。 Flexbox 几乎可以为您购买此导航所需的一切。所以没有float
ing。
CSS 往往有点冗长,去掉多余的东西通常会使其更具可读性/更少引起头痛。
.navbar {
/* overflow: hidden; */ /* not needed */
background-color: #104723;
height: 94px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap; /* possibly leave out to keep both logos visible for narrow views */
}
.armylogo,.armylogo2 {
height: 95%;
/* bottom: 0; they should just sit in space */
padding: 0 2px; /* keep logo from touching edge */
width: auto;
}
.navbar a {
font-size: 16px;
color: #fff; /* use one type of color values */
padding: 14px 16px;
text-decoration: none;
}