如何在CSS/HTML中将文本框相互对齐
如何在CSS/HTML中将文本框相互对齐
提问于 2013-11-21 20:58:35
我想知道如何将这些文本框放在另一个文本框下面，这样.textbox在顶部，textbox1在下面。
CSS
.textbox {
border: 1px solid #848484;
-moz-border-radius-topleft: 30px;
-webkit-border-top-left-radius: 30px;
border-top-left-radius: 30px;
-moz-border-radius-topright: 30px;
-webkit-border-top-right-radius: 30px;
border-top-right-radius: 30px;
border: 1px solid #848484;
outline:0;
height:25px;
width: 275px;
padding-left:20px;
padding-right:20px;
}
.textbox1 {
border: 1px dotted #000000;
outline:0;
height:25px;
width: 275px;
} HTML
<input class="textbox" type="text">
<input class="textbox1" type="text">回答 3
Stack Overflow用户
发布于 2013-11-21 21:01:21
我建议添加以下内容：
input {
display: block;
box-sizing: border-box;
}JS Fiddle demo。
display: block强制每个input元素完全占据它自己的“线”，而box-sizing强制浏览器在计算元素的宽度时包括border-width和padding (以便它们的宽度匹配)。
参考文献：
Stack Overflow用户
发布于 2013-11-21 21:00:53
添加如下内容：
input[type=text] {
float:left;
clear:both;
}应该足够了
http://jsfiddle.net/cFPBZ/
Stack Overflow用户
发布于 2013-11-21 21:01:00
将这一行添加到css中如何：
.textbox{display:block;}同时将class="textbox"添加到所有文本框中。
希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20121668
复制相关文章
相似问题
腾讯云开发者
