[英]my text input boxes ignores the width given
Im trying to make a small menu with 3 text input boxes, but when I add width to them, they ignore it.我试图制作一个带有 3 个文本输入框的小菜单,但是当我为它们添加宽度时,它们会忽略它。 When I style the
div class
, so seperately, they ignore the width and height given and when i just style the input
, It works.当我设置
div class
的样式时,它们分别忽略给定的宽度和高度,当我只是设置input
样式时,它起作用了。 I want to style them seperately though.我想单独设计它们。 The
inpt4
is the one that want to give width to. inpt4
是想要赋予宽度的那个。
<style>
body
{
background-color: #b3d9ff;
}
#container
{
}
.button1
{
position: absolute;
top: 25vw;
left: 52vw;
}
.button2
{
position: absolute;
top: 25vw;
left: 45vw;
}
input
{
height: 2vw;
width: 4vw;
display: block;
color: black;
background-color:;
border-radius: 1vw;
}
input:hover {background-color: ;}
input:active
{
background-color: ;
box-shadow: 12 5px #666;
transform: translateY(8px);
}
.vragen
{
text-align: center;
}
button
{
height: 3vw;
width: 30vw;
border-radius: 1vw;
}
.lang
{
height: 5.3vw;
}
.popup
{
border: 0.5vw solid black;
text-align: center;
background: #a6a6a6;
position: fixed;
top: 10vw;
left: 70vw;
border-radius: 1vw;
padding: 0 13vw 10vw;
}
button:hover {background-color: #cccccc;}
.inpt1
{
position: absolute;
top: 8.5vw;
left: 12.5vw;
}
.inpt2
{
position: absolute;
top: 8.5vw;
left: 7.5vw;
}
.inpt3
{
position: absolute;
top: 9.5vw;
left: 21.6vw;
}
.vraag
{
position: absolute;
top: 1vw;
left: 1vw;
}
.volgvraagid
{
position: absolute;
top: 1vw;
left: 18vw;
}
.antwoord
{
position: absolute;
top: 7vw;
left: 10vw;
}
.inpt4
{
width: 2vw;
}
And here are the div classes
这是
div classes
<div class="inpt1">
<input type="text" name="name">
</div>
<div class="inpt2">
<input type="text" name="name">
</div>
<div class="inpt3">
<input type="button" value="Opslaan"/>
</div>
<div class="inpt4">
<input type="text" name="name"/>
</div>
By changing with of inpt4
class, you are just increasing the width of input
tag's wrapper class. As a result, the wrapper's width is increasing but input
remains of the same width.通过更改
inpt4
class,您只是增加了input
标签包装器 class 的宽度。因此,包装器的宽度在增加,但input
保持相同的宽度。
Try to make input
tag the full width of its wrapper class.尝试使
input
标签成为其包装器 class 的全宽。
.inpt4 input {
width: 100%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.