如何使输入域的进度条全宽，如在父div中的100%？
要使输入域的进度条全宽，可以通过设置CSS样式来实现。下面是一个示例的解决方案：
- 首先，确保父div元素设置了合适的宽度，可以是固定的像素值或百分比，以便充满整个父div。
- 然后，给输入域(input)元素添加一个class或id，以便在CSS中进行选择。
- 在CSS样式表中，针对该class或id选择器，设置以下属性值：
- 在CSS样式表中，针对该class或id选择器，设置以下属性值：
- 或者
- 或者
这样就可以使输入域的进度条在父div中全宽显示。需要注意的是，这只是使输入域的宽度充满父div，而不是改变进度条的样式或功能。
关于进度条的更多自定义样式和功能，您可以参考腾讯云的相关产品文档和示例。
相关·内容
1回答
我刚刚在移动设备上查看了我的网站，它看起来很棒。然而，当保持在纵向模式时，图像只占页面的一半。它也缩小了我的标志，这也是一个问题。
图像显示在一个滑块中，我在HTML & CSS上创建了这个滑块。
我还在使用引导程序4，但是在将引导程序添加到代码中之前，我也遇到了这个问题。
请看下面的x2图片，它目前是如何在移动和x1的图像，我希望它也在肖像。
我试过：
在CSS中将宽度/高度设置为100%
添加viewport元标记以停止移动设备上的缩放
用@media标记更改我的滚动体的高度(这样不会影响桌面查看)
请参阅下面的当前HTML和CSS。
HTML
<h
浏览 3提问于2020-06-18得票数 1
2回答
我已经为我在Adobe Fireworks Cs5中构建的页面生成了css，我想知道如何设置页眉和其他will的全宽。
@charset "utf-8";
body {
background-color: #fff;
font-size: 62.5%;
margin: 0;
padding: 0;
}
body * {
font-size: 100%;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
p {
margin-bottom: 1.1em;
margin-top: 0;
}
#main p.last
浏览 1提问于2011-01-18得票数 0
回答已采纳
4回答
我有这个网站：
有一个带有颜色#D9D9D9的div
代码CSS：
#full_bar{background:#D9D9D9;width:100%;height:100px;}
我想我的div是全宽度的网站，并被粘合到页脚。
我该怎么做呢？
我在Wordpress中使用主题。
提前感谢！
浏览 0提问于2015-02-24得票数 0
3回答
我有一个问题，使DIVs有固定的高度。以下是代码。除了#gridDiv之外，All还包含其他一些元素。gridDiv将在运行时附加一个网格。我想让gridDiv占据60%的屏幕，不管它里面有没有网格。如果网格太长，放不下DIV，我希望gridDiv有一个滚动条。
目前，gridDiv只有内联高度。我怎样才能实现我想要的？谢谢。
<div id="mainDiv" style="display: block">
<div id="topDiv" style="display: block; height:20%;
浏览 0提问于2015-08-03得票数 2
回答已采纳
我正在尝试将我的网页分成两个垂直的列，可以单击它们将您带到正确的页面。我已经走了这么远了。
HTML
<!-- Choices -->
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xs-12 vertical-center webd">
<h1 class="text-muted text-center">Web Desig
浏览 2提问于2017-02-03得票数 3
回答已采纳
我试图找出负css利润率的百分比是多少。
.box1 {
border:1px solid red;
height: 250px;
display: flex;
}
.box2 {
border:1px solid blue;
height: 120px;
width: 100px;
margin-top: -1%;
}
.box3 {
border:1px solid green;
height: 120px;
width: 100px;
margin-top: -17px
}
<div class="header"
浏览 3提问于2022-03-09得票数 0
1回答
Flexnav桌面视图
、、、
我正在尝试为我正在构建的一个网站在桌面上稍微改变一下的视觉行为。默认情况下，在桌面宽度的浏览器上，将鼠标悬停在具有子菜单的li上会显示如下的子菜单：
桌面：
移动性：
我想知道是否有可能改变它，这样当我将鼠标悬停在桌面上的任何li或整个ul上时，子菜单就会出现，同时保持移动设备的多级菜单行为，如下所示：
下面是我的测试服务器上的站点：
下面是HTML：
<div class="main-nav">
<section>
<div class="mobile-nav">
浏览 0提问于2014-04-12得票数 0
1回答
：悬停宽度过渡毛刺
、、、、
当悬停在某个元素上时，我正在尝试更改该元素的宽度。它似乎可以工作，但只要我将鼠标放在元素上，它就会一直转换，导致一个类似毛刺的循环。如何才能使转换只发生一次？
谢谢。
html：
<div>
<div>
<img id="img" src="#"/>
</div>
</div>
css：
#img {
width: 326px;
height: 326px;
-webkit-transition: width 0.4s, height 0.4s;
transition
浏览 17提问于2019-11-14得票数 0
2回答
我正在尝试获取h1元素的内容来调整字体大小，以确保文本恰好填满其父div宽度的100%。
我试过几个不同的插件，包括fittext.js、slabtext.js和bigtext.js，但都不能正常工作。
有人知道如何在下面的示例中为.sectionTitle h1元素实现这种效果吗？
Codepen：。
示例HTML：
<section id="contact">
<div class="sectionContent">
<h1 class="sectionTitle">Contact&l
浏览 1提问于2017-03-22得票数 1
我在Foundation 6.5.3中创建了一个响应式下拉/钻取megamenu。 除了Microsoft Edge和IE11之外，它在所有浏览器上都运行得很好。我预料到IE会有问题，但是边缘问题把我弄糊涂了。 在Edge中，菜单项是垂直堆叠的，即使它应该是一个水平菜单。如这支笔所示： https://codepen.io/denpub/pen/KLRQGO 现在，包装菜单的div和包装大菜单的div同时包含grid-x和cell样式： <div class="grid-x cell ..."></div> 似乎是导致堆叠问题的原因，如果我像这样将
浏览 17提问于2019-05-27得票数 0
回答已采纳
3回答
Html：
<div class="myDiv">
<img class="myImage" src="...." >
</div>
Css：
.myDiv {
padding: 20px;
}
.myImage {
max-width: 100%;
height: auto;
// ??
}
我不介意图像的上下有空间(20px，因为容器有填充)，但宽度方面，我想突破填充，使图像100%的div。这个是可能的吗？
浏览 0提问于2016-06-02得票数 1
1回答
这是我作为学习项目的一部分克隆Jobbatical.com的摘录。忽略缺少的徽标。
我正在尝试使固定导航栏中的第二个无序列表(其列表项为Log in，Join，For Companies)右对齐。我尝试了使用检查器工具的各种方法，并设置了空白处-左:自动，但由于某些原因，我不能让它工作。
<nav class="navbar navbar-nav navbar-expand-md fixed-top bg-dark">
<div class="container-fluid">
<div class="fix-
浏览 0提问于2018-01-12得票数 1
回答已采纳
我有一个GWT应用程序，它在其主页上使用以下DIV布局：
<div id="mainContainer">
<div id="applicationHeader">
<div id="imageLoader"></div>
<div id="applicationHeaderMain">
<div id="logo"></div>
<div
浏览 1提问于2012-11-30得票数 0
1回答
我需要创建一个响应式的正方形图像，我从这里跟踪了不同的答案，但有些事情正在发生。我可以看到我的正方形DIV (因为它有黑色背景)，但里面的图像不在正方形中，它就像是因为某种原因而偏移了，我不知道为什么。
最好用查看我的整个代码。
/* Cards */
.card-main-container {
margin-top: 20px;
}
.card-wrapper {
margin-bottom: 20px;
}
.card-img-square {
float: left;
position: relative;
width: 30%;
padding-bo
浏览 0提问于2021-02-16得票数 0
我不能让div到达页面的底部。下面是我的代码：
<!DOCTYPE html>
<html>
<style>
#Welcome {
background-color: pink;
height: 100%;
}
</style>
<div id="Welcome">
Welcome!
</div>
</html>
我没有工作，当我输入高度: 100%；我也尝试了min-height: 100%；但两者都不起作用。我做错了什么？
浏览 88提问于2018-06-02得票数 0
回答已采纳
我有一个有多个进度条的页面，它们都有相同的类。是否可以使用jquery检查这个类的每个元素是否都有100%的宽度？当这个类的每个元素都有100%的宽度时，执行jquery函数吗？
<div class="progress-bar" style="display: none; width: 100%;"></div>
浏览 3提问于2013-11-01得票数 0
回答已采纳
我正在使用flex layout在桌面视图上设置材料卡片内联，在电话视图上设置垂直卡片。
<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" class="containercards">
<div fxFlex fxFlex.xs="100">
<mat-card class="container">
<mat-card
浏览 1提问于2018-03-28得票数 0
我使用下面的CSS来允许wordpress页面上的内容扩展到父div之外。对解决这个问题有什么建议吗？
.extended-content-container {
width: 500%;
margin-left: -200%;
padding-top: 0;
padding-bottom: 60px;
background-color: #333;
}
.extended-content {
width: 100%;
height: 300px;
text-align: center;
}
<div class="extended-content-cont
浏览 0提问于2016-10-15得票数 0
1回答
我试图插入一个可折叠的表格与HTML框在一个谷歌网站。可折叠表格的代码来自http://tutorials.seowebpower.com/google-sites-advanced/collapsible-table。代码是
<html>
<head>
<style>
.container {
background-color:deepskyblue;
width: 600px;
height:50px;
position: relative;
}
.title {
浏览 0提问于2015-12-16得票数 2
我正在使用bootstrap来设计网页，div元素下有一个文本区域，如下所示。
<div class="tab-pane" id="orange">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 col-md-offset-0">
<div class="form-group">
<textarea nam
浏览 4提问于2015-08-12得票数 2
2回答
CSS看透了侧窗
、、
我正在尝试创建一个使用CSS的“侧窗”。当我说左窗时，我的意思是让屏幕的一部分看得见，这样你就可以看到左窗后面的东西，就是这样。
我能够得到我想要的效果，通过设置身体的背景颜色与前景颜色相同，然后使用一个侧窗图像，它有一个圆形渐变，中间是白色，边缘是黑色，只要页面上的所有内容都是相同的颜色。这不完全是我想要的，因为我想使用颜色或屏幕后面的任何东西。
我想出了这个：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<
浏览 1提问于2010-02-11得票数 5
回答已采纳
1回答
我有一个测试帖子：
我想让这个特定的部分是全宽的，
我的目的是让它像这样：
我想这样改变背景，这样观众就不会觉得无聊了。
我试着把这段代码放在主题自定义中，就像这样，但除了背景颜色之外，它根本没有变化
p.has-background{
max-width:1290px;
background-color:blue
width: 100%!important;
height: 100%!important;
background-size: contain!important;
}
浏览 8提问于2021-03-06得票数 0
我想验证用户的输入是否在全宽度(Katakana & Hirakana & alpha)字符中？
我见过Laravel验证医生，但无法验证我的情况。
有人能给我举个例子吗？(输入=>验证)
全宽度只有仿冒：
‘=>1’=>无效，‘ぁァ1あア1’=>无效，‘あア1’=>有效，
半宽度的仿制品：
“=>1”有效，“ぁァ1あア1”=>无效，“あア1”=>无效，
浏览 0提问于2019-06-07得票数 0
1回答
我不知道bootstrap的要点是否适用于这种表单，但页面是否可能占据整个页面区域而不是中心？如果不是，那么我至少可以在整个页面上放置一个图像？(对不起，如果我没有太多意义).So，是的，任何帮助都是非常感谢的！
Html：
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>Bootstrap 4 Layout</title>
<meta http-equiv="x-ua-com
浏览 0提问于2018-05-07得票数 0
1回答
我有一个有2列的行。在第二列中，我有5张图片，width=为“60px”，height=为“66px”。如何使这5个图像水平居中，但响应性强。text-align:center没有帮助，因为在较小的设备上，它们看起来并不好。它们应该一个在另一个下面，而不是水平居中。如何使图像位于列的中心，并使它们之间的距离相等？
下面是我的代码：
.image {
margin-right: 15px;
}
<div class="row">
<div class="col-md-6">
some text
</div>
浏览 2提问于2015-10-11得票数 0
输入和按钮在同一行上工作正常，但输入大小较小，并且有更大的空间。
我希望它是100%的完整尺寸，下面的线输入和按钮，你看到了吗？我的HTML是：
<form class="form-inline">
<div class="form-group">
<input type="email" class="form-control emailNewsletter" placeholder="Your Email goes here">
&
浏览 2提问于2018-09-23得票数 3
1回答
问题是，在使用CSS中的.Fixed类时，我的ASP控件超出了屏幕右侧的界限。我试过'；‘的东西，但是没有成功...
参见。
CSS：
#parent {
display: inline-flex;
}
#narrow {
width: 1000px;
margin-right: 20px;
}
#wide {
width: 100%;
}
.FullWidth {
width:100%;
}
.Fixed {
position: fixed;
}
短超文本标记语言(asp.net格式)
<div id="parent
浏览 0提问于2016-03-31得票数 0
我正在通过SendGrid创建一个定制的电子邮件文件。我试图让我的页脚跨越整个客户端的宽度，特别是在桌面上。我得到了一个600 on列，因此我的页脚在移动上看起来很好，但在桌面上却很瘦。
我试着把我的页脚div做得更宽(使它比以良好为中心的父母更大)，并给它一个负的左边距，这样它就完美地居中了。遗憾的是，Gmail忽略了负利润。
有许多其他的技术，所以中心的孩子，不管宽度，但他们都不是有效的CSS电子邮件客户端。电子邮件CSS不允许：
positionflextransform:翻译
文本对齐:中心是允许的，并发挥作用，但只有当孩子比它的父母更薄的时候。
当儿童div比它的父母更宽的时候，还有
浏览 5提问于2021-11-28得票数 0
5回答
这是我一直有的问题。
以下HTML：
<form id="sy_login">
<ul class="form_column">
<li>
<input id="sy_login_username" name="sy_login_username" placeholder="Username"></input>
</li>
<li>
浏览 0提问于2012-11-05得票数 4
回答已采纳
1回答
我有一整页都用的包装标识。
html
<div id="wrapper">
</div>
css
#wrapper{
width: 960px;
margin: 0 auto;
}
现在，我想要做的是为这个id创建一个类，我将使用这个类来处理具有最大宽度、完全分辨率的页面。
html
<div id="wrapper" class="full-width>
</di>
css
#wrapper.full-width{
width: 100%;
}
这样做对吗？
浏览 3提问于2014-02-10得票数 0
回答已采纳
当我水平滚动时，如何使块B像块A一样填充宽度？
html：
<div id="main">
<div style="background-color:coral;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
<div style="background-color:lightbl
浏览 3提问于2016-05-17得票数 3
回答已采纳
我在一个div中有三个垂直对齐的图像。当浏览器缩小时，第三个图像不再适合div，导致该图像下降到第二行。我在CSS中使用了auto和100% width和height属性，但它不能保持图像的内联，也不能调整图像的大小。有人知道怎么解决这个问题吗？
<div class="media">
<img class="media_image" src="source1_name">
<p>Some text that overlays the image</p>
浏览 0提问于2016-04-12得票数 0
1回答
我最近使用Fireworks cs5生成css，我似乎无法将我的页眉设置为全宽。我已经尝试了各种解决方案，但到目前为止还没有一个效果很好。我需要Div2，这是我的页眉全宽。
下面是代码。
@charset "utf-8";
body {
background-color: #fff;
font-size: 62.5%;
margin: 0;
padding: 0;
}
body * {
font-size: 100%;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
p {
浏览 0提问于2011-01-19得票数 0
回答已采纳
1回答
我正在尝试建立一个完整的网页广告一样，从广告与jQuery。
它只是一个100%宽和高的iframe，但我的主要问题是，整个页面的广告是在一个有垂直滚动条的网站上显示的，所以如果iframe广告也有一个滚动条，那么就会有两个滚动条可见，这看起来很糟糕。
我该怎么解决这个问题呢？还是有一些已经编写好的代码可以做到这一点？
浏览 3提问于2011-10-29得票数 0
回答已采纳
1回答
使主要内容在移动屏幕上全宽显示
、、、、
我已经在论坛上寻找答案，但没有找到一个可以适用于我的问题。我希望我的.main-content (文章文本和图片)在移动屏幕上占满宽度，而不是.sidebar和.ad。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" conte
浏览 0提问于2019-12-07得票数 0
1回答
覆盖div的页面宽度
、、、
我的页面设置为所有元素都包含在640px的页面宽度(移动站点)中，如下所示：
html, body {
width: 640px;
padding: 25px;
margin-left: auto;
margin-right: auto;
}
所有元素在两侧都有相同的边距，填充为25px。这是可行的，但是我有一个元素，我想让它跨越整个页面的宽度，这样就否决了所有元素必须以640px的宽度居中的事实。
也许我是很难接受这个问题，也许我应该改变页面上的其他东西，使所有元素在640px的宽度上对齐。有什么想法？
浏览 0提问于2013-11-17得票数 0
我的代码非常简单
HTML：
<div class="blog cf">
<div class="left_article_content">
<img width="100" height="100" src="http://placehold.it/100x100" alt="test">
</div>
<div class="right_article_content">
浏览 1提问于2014-09-24得票数 0
我想显示的图像和页脚，以始终适合浏览器窗口-没有滚动。为了适合图像，应该在保持比例不变的同时调整图像的大小。页脚应始终位于底部，图像应填充其余空间。我认为这应该很容易通过bulma实现-但到目前为止我还不能让它工作。英雄布局不是使用bulma实现这一点的正确布局吗？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, ini
浏览 1提问于2018-10-31得票数 1
刚开始使用离子，所以我想这是一个新的问题，但我还没有做到以下几点：
- div h:100% w:100%
- div 30% 100%
- image 100% 100%
- div 5% w:100%
- button 100% 100%
- div 65% w:100%
- image 50% 50%
- image 50% 50%
- image 50% 50%
- image 50% 50%
我需要这样的东西(图像必须在div内保持高宽比)：
这是我的应用程序：
这是我的密码：
ion-view
浏览 2提问于2015-02-26得票数 0
1回答
我只想知道怎样才能解决这个背景问题？它开始从.box的顶部和底部重复。有什么解决办法吗？
这是我的HTML：
<body>
<div class="box">
<img src="https://s4.uupload.ir/files/e8hzocoxsamec01-removebg-preview_wxkl.png" width="100px"> <be>
I love Unicorns!
</div>
我的CSS：
html, body {
font-family: &
浏览 3提问于2021-11-03得票数 0
回答已采纳
1回答
我在wordpress中使用bootstrap进行了设置，如下所示：
<div class="container">
<div class="row">
<div id="NEEDS TO BE FULL WIDTH>
</div>
</div>
</div>
我想背景的“需要是全宽”的div是全浏览器宽度，但不确定如何。如果我把它设置成100%的宽度，它就会变成一个水平滚动。有什么想法吗？
浏览 2提问于2014-12-07得票数 1
1回答
我试图对齐两个输入元素，一个按钮和一个进度条，在一行中(新到CSS和引导).The按钮没有正确地对齐与输入elements.The进度条甚至没有显示。我使用的html如下所示。
<div class="form-group">
<input type="text" class="form-control" placeholder="from">
<input type="text" class="form-control" placeholder="
浏览 1提问于2016-09-20得票数 0
回答已采纳
1回答
我的html有一个问题:我正在尝试创建一个中间有我的主要内容的东西，并且有一个从左边弹出的侧边栏。我有一切工作在侧边栏和主要内容，但有一个巨大的差距在页面的左侧。
我如何让我的内容移到左边，让它充满整个页面？我如何让我的中心内容一直移到左边，一直移到顶部？
这是我的css和html
.container{
display:flex;
width:100%;
}
<div class="container">
<div class="column">
<app-grocery-si
浏览 3提问于2020-09-02得票数 0
如何使第一个按钮与第二个按钮的大小相同？而不管按钮所在的内容是什么。附注:按钮的固定宽度不合适 .box {
display: flex;
flex-direction: column;
width: max-content;
}
.box button{
width: 100%;
} <div class="box">
<div class="one">
<h2>long header</h2>
<button>Abcde</
浏览 15提问于2020-09-16得票数 0
1回答
我试图调整一个只使用CSS的图片大小，问题是我不知道它的尺寸。
到目前为止，我尝试的是将放入a中，然后使图像具有105%的宽度。这个想法是包含div除了它的内容之外没有其他大小，但这只是使图像的大小与下一个具有显式大小的祖先的大小相同。
浏览 0提问于2010-10-27得票数 0
回答已采纳
3回答
下面是我的代码：
<div style='display: table'>
<div style='height:200px; width:100%; text-align: center; display: table-cell; vertical-align: middle'>No result found</div>
</div>
为什么width:100%不工作？我该怎么解决它呢？
浏览 0提问于2013-11-11得票数 7
回答已采纳
如何在较小的屏幕上创建一个需要填充整个窗口的div部分？较窄的是div部分(这就像一张卡片)。教学大纲(或您将在屏幕截图中看到的常见问题)是页面。syllabus.narrow是教学大纲页面的特定窄卡，但这并不重要。
我需要白卡展开到屏幕的边缘(屏幕的侧面，以及标题的底部)。我需要它自动居中。更改边距/填充并不能保持所有屏幕大小的居中。
这是狭窄的默认css。
.narrow {
width: 75%;
margin: 25px auto;
padding-top: 30px;
}
这是用于小屏幕的css。
@media (max-width: 767px) {
浏览 0提问于2019-12-04得票数 0
我正试图产生一个进度条与分隔条分隔各节。这个分隔条(子<div/>)挂在进度条(父<div/>)下面。因此，我希望进度条覆盖除下面挂起的部分以外的所有分隔栏。
下面是一个非常简化的表示：
<html>
<head>
<style>
body {
width:500px;
margin:0 auto;
}
#parent {
width:50%;
height:30px;
background-color
浏览 6提问于2011-12-13得票数 0
回答已采纳
我有一个看起来像的页面，代码如下：
html:
<div class="parent">
<div class="child">
<input type="text">
<input type="submit">
</div>
</div>
css:
.parent { width: 500px; }
.child { width: 100%; }
我如何才能让它们一起占据父div宽度的100% (文本输入相应地伸展)？
需要说明的是
浏览 1提问于2013-06-30得票数 0
4回答
我刚开始使用.php/Java，谁能告诉我如何让我的引导进度条根据用户设置的时间递增。
进度条：
代码：
<div class="progress progress-striped active">
<div id="progressbar" class="bar" style="width: 0%;"></div>
用户输入示例:代码：
设置秒数：
<input type="text" id="speed" value="10" />
浏览 0提问于2012-08-31得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
