html改变下拉框的大小,调整屏幕大小时，HTML导航栏下拉框内容无法正确调整大小...
2 个答案:
答案 0 :(得分：2)
如下所示修改媒体查询
.dropdown-content {
padding: 1vh 1vw;
right:10px;
}
a.dropdown-content {
padding: 1vh 1vw;
width: 98%;
}
.dropdown-content a {
padding: 5vh 2.9vw;
}
body {
background-color: blue;
}
p {
color: white;
font-size: 20px;
display: inline;
padding: 20px;
font-family: arial;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(10,10,10);
top: 0;
}
.navcont {
margin: 0;
position: relative;
float: left;
}
.navcont a, .dropbtn {
margin: 0;
position: relative;
display: block;
color: white;
font-size: 20px;
text-align: center;
padding: 5vh 7vw;
text-decoration: none;
border-right: 1px solid rgb(50,50,50);
border-left: 1px solid rgb(50,50,50);
}
.navcont a:hover {
transition-duration: 0.3s;
background-color: rgb(30,30,30);
}
.navcont a:active {
background-color: rgb(9,194,36);
}
.sticky {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index:3
}
.dropdown:hover .dropbtn {
transition-duration: 0.3s;
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 5vh 7.4vw;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
@media (max-width:650px) {
.navcont a {
padding: 3vh 3vw;
}
.dropdown-content {
padding: 1vh 1vw;
right:10px;
}
a.dropdown-content {
padding: 1vh 1vw;
width: 98%;
}
.dropdown-content a {
padding: 5vh 6.8vw;
}
}
@media screen and (max-width: 600px) {
.navcont a {
padding: 3vh 3vw;
}
.dropdown-content {
padding: 1vh 1vw;
right:10px;
}
a.dropdown-content {
padding: 1vh 1vw;
width: 98%;
}
.dropdown-content a {
padding: 5vh 2.9vw;
}
.dropbtn {
padding: 3vh 3vw;
}
div.tr_about {
width: 60%;
}
div.tl_about {
width: 37.5%;
}
}
- Home
- About
- Purchase
Contact
Support
FAQ
答案 1 :(得分：0)
符合您要求的PFB代码
body {
background-color: blue;
}
p {
color: white;
font-size: 20px;
display: inline;
padding: 20px;
font-family: arial;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(10,10,10);
top: 0;
}
.navcont {
margin: 0;
position: relative;
float: left;
width: 24% !important;
}
.navcont a, .dropbtn {
margin: 0;
position: relative;
display: block;
color: white;
font-size: 20px;
text-align: center;
padding: 5vh 7vw;
text-decoration: none;
border-right: 1px solid rgb(50,50,50);
border-left: 1px solid rgb(50,50,50);
}
.navcont a:hover {
transition-duration: 0.3s;
background-color: rgb(30,30,30);
}
.navcont a:active {
background-color: rgb(9,194,36);
}
.sticky {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index:3
}
.dropdown:hover .dropbtn {
transition-duration: 0.3s;
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 5vh 7.4vw;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.navcont a {
padding: 3vh 3vw;
}
.dropdown-content {
padding: 3vh 3vw;
}
a.dropdown-content {
padding: 3vh 3vw;
width: 100%;
}
.dropbtn {
padding: 3vh 3vw;
}
div.tr_about {
width: 60%;
}
div.tl_about {
width: 37.5%;
}
}
- Home
- About
- Purchase
Contact
Support
FAQ
html改变下拉框的大小,调整屏幕大小时，HTML导航栏下拉框内容无法正确调整大小...相关推荐
- Bootstrap屏幕缩小时在导航栏下生成滚动条
相关说明:Bootstrap在进行响应式布局时,当屏幕缩小到一定程度时在导航栏下生成滚动条. 主要代码: @media screen and (max-width:780px){#product .p ...
- php zblog 侧边栏样式_zblogphp版如何实现导航栏下拉框
zblogphp版目前还无任何插件实现导航栏下拉框,根据自己研究和网上的知识,终于研究成功.下面说下实现步骤: 一.在导航条所在模板模板加入更改以下代码 首页{module:navbar} 更改为: ...
- 利用 html 和 css 实现导航栏下拉(display block、display none)
利用 html 和 css 实现导航栏下拉(display block.display none) 需求 设计并实现一个导航栏菜单,对某个项目比如你的个人书籍按类别(硬件类.软件类.语言类.网络类等分 ...
- 纯CSS实现导航栏下拉动画效果
实现思路 导航栏的下拉效果通过在ul的li里再嵌套一个ul,再通过animation属性改变第二导航栏ul的高度来实现导航栏下拉动画效果.老铁没毛病. 实现效果: HTML代码 <div cla ...
- CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单
水平&垂直对齐 元素居中对齐 .center {margin: auto;width: 50%;border: 3px solid green;padding: 10px; } 文本居中对齐 ...
- HTML字母导航栏怎么做,html导航栏下拉菜单怎么制作？这里有详细的代码实例
本篇文章介绍了关于html导航栏下拉菜单的制作,文章一开始就给出了全部的导航栏下拉菜单的代码,没看懂的下面都有详细的解释.下面就让我们一起来看这篇文章吧 我们要说的是html导航栏下拉菜单的制作,先看 ...
- LabVIEW学习笔记十三：窗格详解（调整窗格大小时缩放特定对象）
软件里对于窗格的说明和对于分割栏的说明是放在一起的,因为两者本来就联系紧密,窗格就是用分割栏构成的. 配置窗格 右键单击窗格中的滚动条并选择需配置的窗格,从下列快捷菜单项中选择以配置窗格. 显示项-为 ...
- Android中导航栏之搜索框SearchView
Toolbar系列文章导航 Android中导航栏之Toolbar的使用 Android中导航栏之溢出菜单OverflowMenu Android中导航栏之搜索框SearchView Android中 ...
- 导航框架式html播放器的实现以及导航栏的自动更新脚本实现
本人对HTML并没有太多的使用,都是现用现查.今天想要实现一个HTML播放器来播放电脑本机存放的视频文件.经过查资料完成一个简单的导航框架式的HTML播放器以及其导航栏的自动跟新脚本. 导航框架式HT ...
最新文章
- Eclipse用法和技巧十：显示代码outline
- Android5.0之CardView的使用
- Windows常用快捷键汇总
- 【转】SAP 条形码
- AngularJS 详解Directive（指令）机制
- Linux背后的思想
- 原型——设计思维之建立模型
- xshell密码保存位置_一键安装宝塔面板后哪里找账号密码？
- Opera中的opera密码修改，半残了
- oracle表重命名 索引,Oracle索引
- 三星4k3d电视测试软件,三大硬性指标 揭开伪4K电视真实面目
- ggplot2柱状图进阶画法
- arduino-esp32-点亮板载LED，闪烁LED。02
- laravel很慢_Laravel网站打开速度优化的方法汇总
- 支付宝调起支付时显示的商家别名如何修改？
- 机器学习：SVR支持向量机回归
- PWM（Pulse Width Modulation）调试原理
- 关于目标跟踪SiamMask的Youtube-VOS 数据库下载
- 在linux中，命令 nc -lk 和nc -lp 的区别是什么
- wav转mp3图文教程