html css多选框左对齐,html – 对齐文本和选择框在CSS相同的宽度?

Ok这似乎不可能得到正确。我有一个文本框和一个选择框。我想他们是相同的宽度,所以他们排队在左边距和右边距。

input, select {

width: 200px;

}

123

那会是你想的,对吧?不。 Firefox中的选择框缩短6px。查看屏幕截图。

好,让我们编辑代码,使两个样式。

input {

width: 200px;

}

select {

width: 206px;

}

确定工作!

等待,在Chrome中测试更好!

有人可以告诉我如何在所有浏览器中排队这些?为什么我不能只做宽度:200px所有,为什么所有的浏览器显示不同?另外,虽然我们在它为什么是文本框和选择框不同的高度?我们如何让他们到同样的高度?已尝试高度和行高没有效用。

解:

Ok我找到了解决方案,从下面的答案一些帮助。关键是使用box-sizing:border-box属性,因此当您指定包括边框和填充的宽度时。参见excellent explanation here.然后浏览器不能填充它。

代码在下面,还设置框的高度为相同的大小和缩进框中的文本,使其排列。你还需要设置边框,因为Chrome有一个真正奇怪的边框,它使用的选择框,将抛出的对齐方式。这将适用于HTML5网站(例如支持IE9,Firefox,Chrome,Safari,Opera等)。

input, select {

width: 200px;

border: 1px solid #000;

padding: 0;

margin: 0;

height: 22px;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

input {

text-indent: 4px;

}

123

123456789 123123123123

123456789 123123123123 134213721381212

只需一个最后一个警告,你可能不希望输入按钮,复选框等包含在这个样式,所以使用输入:not([type =’button’])不应用于某些类型或使用输入[type =’text’ ],输入[type =’password’]以指定您希望它应用于的类型。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值