html – 连续放置2个50％宽度的输入元素,了解盒子大小

概述我正在尝试将2个输入元素内联,每个输入元素的宽度为50％.为什么我必须从输入元素中减去边框宽度,即使我使用box-sizing：border-box？ http://jsfiddle.net/Nmvk6/ HTML <form class="form"> <div class="form-group"> <label>Type</label> <button 我正在尝试将2个输入元素内联,每个输入元素的宽度为50％.为什么我必须从输入元素中减去边框宽度,即使我使用Box-sizing：border-Box？

http://jsfiddle.net/Nmvk6/

HTML

<form >    <div >        <label>Type</label>        <button >            <span ></span>        </button>    </div>    <div >        <select >            <option value="foo">foo</option>            <option value="bar">bar</option>        </select>        <input  type="number"></input>    </div></form>

CSS

.half-wIDth-form-control {   display: inline-block;    wIDth: calc(50% - 2px);    /*wIDth: 50%;*/    /*Box-sizing: border-Box;*/}

解决方法 你在这里遇到的问题与内联块有关.

display：inline-block告诉浏览器将元素视为与其内容有关的块,但作为与其周围环境相关的内联元素.

这里的问题是两个元素周围的环境包括一些空白区域.具体来说,两个元素之间有一些空白区域.空格与内联元素相关,因此也适用于内联块元素.

简而言之,就好像这两个元素是句子中的单词.它们之间的空白被视为两个单词之间的空间.

你最终得到的是50％宽度的一个空格字符的50％宽度.

这是一个众所周知的内联块问题,但确实让人们大开眼界.

因此,快速脏的解决方案是移除空间 – 关闭< select>的结束之间的间隙.并且< input>的开始所以那里没有空间.

其他替代方法包括使用注释来消除差距(丑陋),将容器元素设置为Font-size：0px;以及各种其他Hacky解决方案.

或者,您可以丢弃内联块.还有许多其他选项可以实现相同或类似的结果 – 特别是float,display：table-cell和flex-Box,但也存在其他选项.

但我的建议是删除两个元素之间的空格.快速,轻松修复.

总结

以上是内存溢出为你收集整理的html – 连续放置2个50％宽度的输入元素,了解盒子大小全部内容，希望文章能够帮你解决html – 连续放置2个50％宽度的输入元素,了解盒子大小所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。