html改变下拉框的大小,调整屏幕大小时，HTML导航栏下拉框内容无法正确调整大小...

最新推荐文章于 2023-03-03 19:51:57 发布
最新推荐文章于 2023-03-03 19:51:57 发布
阅读量1.1k 收藏
点赞数
文章标签： 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%;

}

}

答案 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%;

}

}

Soph Ruan
关注
html下拉列表框的长度,HTML中如何定义下拉列表框的默认长度？
weixin_39547596的博客
06-03 1386
一共两个文件,html页面里面调用js文件就可以了,不是要把代码也复制到html文件里面^……联动菜单 是这个意思吗?实现方法很多 推荐一个比较好的:琥珀联动菜单以下信息为琥珀联动菜单：(在此感谢作者！)下面是静态页面：HPMenu_Demo.html<html><head><meta http-equiv="Content-Type" content="text/h...
html下拉框自适应,个性化Select下拉列表,长宽可自适应
weixin_30768103的博客
06-03 2255
一个个性化的Select下拉列表框,长宽可自适应，可进行的自定义设置比较多，比如可进行select背景设置，select经过时背景设置，select打开时背景设置，options下拉列表尾部背景设置，options下拉列表循环背景和字体设置，option鼠标经过背景和字体颜色设置等。个性化Select,长宽可自适应body{font:12px/150% "Lucida Grande", Arial...
html下拉框字体大小,select下拉框选择字体大小
weixin_33240862的博客
06-09 2779
效果： 结合Bootstrap、jQuery和ES6字符串模板与箭头函数使用JavaScript DOM操作动态添加option，随着option:selected选中的字号而改变相应的字体大小代码:如果需要没有文字，输入框(input)正是你所期望的。 目前只适用于非内联的 checkbox 和 radio。$(function() {var fontSize = ['12px', '14px'...
html选择列表框长度,HTML中如何定义下拉列表框的默认长度？
weixin_39832727的博客
06-04 543
一共两个文件,html页面里面调用js文件就可以了,不是要把代码也复制到html文件里面^……联动菜单 是这个意思吗?实现方法很多 推荐一个比较好的:琥珀联动菜单以下信息为琥珀联动菜单：(在此感谢作者！)下面是静态页面：HPMenu_Demo.html<html><head><meta http-equiv="Content-Type" content="text/h...
设置select下拉框的宽度
热门推荐
zhengqiqiqinqin的专栏
07-26 3万+
设置select宽度，一直以来都认为只能通过修改选项的长度来修改，今天发现可以直接设置，代码如下：
基于CSS+HTML菜鸟自己研究的居中导航栏透明双下拉框
weixin_41041567的博客
04-01 1959
1，居中导航栏做出来的效果 效果： 2.透明下拉框 透明导航栏： 图中效果是我用最简单最笨的方式写出来的，也是作为平时的练习，建一个完整的网站，因为是自己拼凑的，所以两个并排下拉框是使用绝对定位来改变位置的,所以需要自己调节left,top的值，直接上代码段。 css样式 <style> * { margin:0; padding:0;} ul, li{ li...
html导航栏下拉框
06-20
HTML导航栏下拉框，也称为下拉菜单或下拉列表，是网页设计中常用的一种交互元素，用于提供额外的选择选项，当用户点击某个菜单项时，会显示一个包含更多选项的列表。在HTML中，通常是通过`<select>`和`<option>`标签...
前端可搜索下拉框控件.zip
08-05
`bootstrap-select.css`包含了定制的CSS样式，这些样式用于使下拉框具有Bootstrap的美观外观，同时添加了额外的搜索栏和高亮匹配项等特性。`bootstrap-select.js`则是JavaScript代码，它实现了下拉框的交互逻辑，...
html京东下拉菜单设置,实现京东导航栏的下拉框
weixin_33417904的博客
06-03 2106
京东/* 解决高度塌陷的问题 */.clearfix::before,.clearfix::after{content: table;clear:both;}body{/* 设置字体以及字体的大小和行高 */font: 12px/5.5 微软雅黑;}.top-bar-wrapper{/* 设置盒子宽度 */width: 100%;/* 设置盒子高度 */height: 30px;/* 设置行高 *...
菜单导航.zip_HTML_
08-10
下拉框（Dropdown）是导航栏中常见的一种功能，它允许在一个空间内展示多个子菜单选项。在HTML中，下拉框可以通过组合`<ul>`（无序列表）和`<li>`（列表项）元素，以及CSS来控制样式和行为，实现点击时显示或隐藏子...
html控制下拉菜单的长和宽,怎样单纯用CSS重写select标签的样式？主要是下拉菜单的长宽和选择时的颜色...
weixin_42324688的博客
06-03 175
怎样单纯用CSS重写select标签的样式？主要是下拉菜单的长宽和选择时的颜色，不想拜托JS(PS：JS我还不怎么会。。)按课程名称按课程类别按主讲师.onlesson{display:inline-block;width:153px;height:82px;line-height:78px;margin-left:20px;margin-right:15px;}.onlessons...
html 下拉菜单的样式设置
weixin_43564529的博客
08-23 4663
html <div class="header"> <div class="logo"> <img src="image/logo.png"> </div> <div class="menu" onmouseleave="show_menu1()"> <div class="menu_title" onclick="show_menu()"&g
修改下拉框的大小以及样式
m0_51707906的博客
09-07 678
/将箭头改成实体箭头。
html下拉框的宽度怎么设置,在HTML选择下拉选项中设置下拉元素的宽度
weixin_35682224的博客
06-07 2874
HTML：Please select an itemItem text goes in here but it is way too long to fit inside a select option that has a fixed width adding moreCSS：.shortenedSelect {max-width: 350px;}使用Javascript：// Shorten ...
h5页面移动端点击下拉框页面以及输入框变大
weixin_38722596的博客
11-23 920
h5页面移动端点击下拉框页面以及输入框变大
html中导航栏的下拉框
09-24
HTML中的导航栏通常会包含下拉菜单（也称为下拉框），这是一种交互式的元素，用于展示更多选项供用户选择。在HTML5中，我们常常使用`<select>`和`<option>`标签来创建下拉列表。下面是一个简单的例子： ```html ...
HTML，页面导航栏中鼠标放在导航栏文字上时自动显示下拉框。编写代码
最新发布
10-11
在HTML中，创建一个导航栏并实现鼠标悬停时显示下拉菜单通常涉及到CSS样式和HTML结构。下面是一个简单的示例，假设我们有一个无序列表(list)作为导航链接，并且使用`<li>`元素来代表每个链接： ```html <!DOCTYPE ...
如何控制HTML的下拉列表框的下拉列表高度
sy9301的专栏
07-17 5035
<br />这段代码是通过JavaScript来控制下拉列表的高度<br /><select size=1 id="jia" onmouseover="jxq(1);" onmouseout="jxq(2);"><br /><br /><option>1111</option><br /><option>2222</option><br /><option>3333</option><br /><option>4444</option><br /><option>5555</option><br /><op
html+css设计导航条及下拉框
LJS078182的博客
03-03 892
第一次写这样的代码 实属不易 出现很多问题 希望能够在线1
html 下拉框高度,如何自定义设置select下拉框高度的优化方法
weixin_39553458的博客
06-03 3922
在项目开发中经常会遇到select下拉框优化问题，默认的样式简直难看到死，所以大家都会想到去设置select高度问题，当然一些组件或者插件也可以实现对其完美优化，我之前的一篇文章也写到了相关优化方法《如何修改select默认option数量多余显示滚动条查看》大家可以去看一下，今天这篇文章整理是我在网上搜集的一篇完美解决select下拉框高度的解决方法，相当简单。我们想要实现的效果是出现下拉框之后...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值