gpt4 book ai didi

html - 输入边框 CSS

转载 作者:太空宇宙 更新时间:2023-11-04 14:57:17 26 4
gpt4 key购买 nike

我的输入边框有问题。当我更改边框宽度属性时,它会更改整个输入的宽度。但是,我希望输入的宽度为 100%。这是我的代码:

CSS

#wrapper {
width: 170px;
}
textarea {
border-color: #eee;
border-width: 1px;
}
label, textarea, input {
width: 100%;
display: block;
}
input {
border-style: solid;
border-width: 1px;
}
<div id="wrapper">
<form>
<label for="comments">Comments</label>
<textarea name="comments" rows="5"></textarea>
<label for="date">Date</label>
<input type="text" name="date">
<label for="time">Time</label>
<input type="text" name="time">
<label for="longitude">Longitude</label>
<input type="text" name="logitude">
<label for="latitude">Latitude</label>
<input type="text" name="latitude">
</form>
<div>

请注意输入几乎延伸到文本区域,但不完全延伸。谢谢!

最佳答案

您需要使用 box-sizingborder-box 来添加 width 以及 border 也占据了自己的宽度:

* {
box-sizing: border-box;
}
#wrapper {
width: 170px;
}
textarea {
border-color: #eee;
border-width: 1px;
}
label, textarea, input {
width: 100%;
display: block;
}
input {
border-style: solid;
border-width: 1px;
}
<div id="wrapper">
<form>
<label for="comments">Comments</label>
<textarea name="comments" rows="5"></textarea>
<label for="date">Date</label>
<input type="text" name="date">
<label for="time">Time</label>
<input type="text" name="time">
<label for="longitude">Longitude</label>
<input type="text" name="logitude">
<label for="latitude">Latitude</label>
<input type="text" name="latitude">
</form>
</div>

解释

CSS盒模型,默认为content-width定义总尺寸为:

width = contentWidth + paddingLeftWidth + borderLeftWidth
height = contentHeight + paddingLeftHeight + borderLeftHeight


(来源:binvisions.com)

关于html - 输入边框 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40206542/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com