![内联块元素]( "内联块元素")
本文介绍了两个内联块元素（每个50％宽）不在一行中并排放置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ <！DOCTYPE html> < html> < head> < title>宽度问题< / title> < style type =text / css> body { margin：0; } #left { width：50％; background：lightblue; display：inline-block; } #right { width：50％; background：orange; display：inline-block; } < / style> < / head> < body> < div id =left>左< / div> < div id =right>右< / div> < / body> < / html> JSFiddle： http： //jsfiddle.net/5EcPK/ 上述代码尝试将#left div和#right div并排放置在单行。但是你可以在上面的JSFiddle URL中看到，这不是这样。 我能够解决这个问题，将其中一个div的宽度减少到49％ 。请参见 http://jsfiddle.net/mUKSC/ 。但是这不是一个理想的解决方案，因为两个div之间出现了一个小的差距。 另一个我能够解决问题的方法是浮动两个div。请参见 http://jsfiddle.net/VptQm/ 。这工作正常。 但我的原始问题仍然存在。 解决方案当使用 inline-block 元素，这些元素之间总会有空格 问题约〜4px宽）。 所以，你的两个 divs ，都有50％的宽度，加上 （〜4px）的宽度超过100％，因此打破。您的问题示例： body {margin：0 ; / *删除默认的body margin * /} div {display：inline-block; width：50％;}。left {background-color：aqua;}。right {background-color：gold;} < div class =left> foo< / div>< div class =right> bar< / div> 有几种方法可以解决： 1。这些元素之间没有空格 {margin：0; / *删除默认的body margin * /} div {display：inline-block; width：50％;}。left {background-color：aqua;}。right {background-color：gold;} < div class =left> foo< / div>< div class =right> bar< / div> 2。使用HTML注释 body {margin ：0; / *删除默认的body margin * /} div {display：inline-block; width：50％;}。left {background-color：aqua;}。right {background-color：gold;} < div class =left> foo< / div><！---->< div class =right> bar< / div> 3。将父项 font-size 设置为 0 ，然后将一些值添加到 inline-block body {margin：0; / *删除默认的body margin * /}。parent {font-size：0; / * parent value * /}。parent> div {display：inline-block; width：50％; font-size：16px; / * some value * /}。left {background-color：aqua;} right {background-color：gold;} < div class =parent> < div class =left> foo< / div> < div class =right> bar< / div>< / div> 4。在它们之间使用负边距（不赞成） body {margin：0; / *删除默认的body margin * /} div {display：inline-block; width：50％; margin-right：-4px; / * negative margin * /}。left {background-color：aqua;} right {background-color：gold;} < div class =left> foo< / div>< div class =right> bar< / div> 5。正在关闭角度 body {margin ：0; / *删除默认的body margin * /} div {display：inline-block; width：50％;}。left {background-color：aqua;}。right {background-color：gold;} < div class =left> foo< / div>< div class =right> bar< / div>< hr> div class =left> foo< / div>< div class =right> bar< / div> 6。跳过某些 HTML结束标记（感谢@thirtydot的参考） body {margin：0; / *删除默认body margin * /} ul {margin：0; / *删除默认的ul margin * / padding：0; / *删除默认的ul padding * /} li {display：inline-block; width：50％;}。left {background-color：aqua;}。right {background-color：gold;} < ul> p> 参考文献： 在CSS技巧上战胜内联块元素之间的空间 删除内联块元素之间的空格David Walsh 如何删除inline-block元素之间的空格？ a href =http://stackoverflow.com/users/5035890/marcos-p%C3%A9rez-gude> @MarcosPérezGude ，所述最佳的单向链接元素的方式是使用 rem ，并在 html 标签上添加一些默认值 font-size （如 HTML5Boilerplate ）。示例： html { font-size：1em; } .ib-parent {/ * ib - > inline-block * / font-size：0; } .ib-child { display：inline-block; font-size：1rem; } <!DOCTYPE html><html><head><title>Width issue</title><style type="text/css">body { margin: 0;}#left { width: 50%; background: lightblue; display: inline-block;}#right { width: 50%; background: orange; display: inline-block;}</style></head><body> <div id="left">Left</div> <div id="right">Right</div></body></html>JSFiddle: http://jsfiddle.net/5EcPK/The above code is trying to place the #left div and the #right div, side by side, in a single row. But as you can see in the above JSFiddle URL, this is not the case.I am able to resolve the issue reducing the width of one of the divs to 49%. See http://jsfiddle.net/mUKSC/ . But this is not an ideal solution because a small gap appears between the two divs.Another way I am able to solve the problem is by floating both the divs. See http://jsfiddle.net/VptQm/ . This works fine.But my original question remains. Why when both the divs are kept as inline-block elements, they do not fit side by side? 解决方案 When using inline-block elements, there will always be an whitespace issue between those elements (that space is about ~ 4px wide).So, your two divs, which both have 50% width, plus that whitespace(~ 4px) is more than 100% in width, and so it breaks. Example of your problem:body{ margin: 0; /* removing the default body margin */}div{ display: inline-block; width: 50%;}.left{ background-color: aqua;}.right{ background-color: gold;}<div class="left">foo</div><div class="right">bar</div>There is a few ways to fix that:1. No space between those elementsbody{ margin: 0; /* removing the default body margin */}div{ display: inline-block; width: 50%;}.left{ background-color: aqua;}.right{ background-color: gold;}<div class="left">foo</div><div class="right">bar</div>2. Using HTML commentsbody{ margin: 0; /* removing the default body margin */}div{ display: inline-block; width: 50%;}.left{ background-color: aqua;}.right{ background-color: gold;}<div class="left">foo</div><!----><div class="right">bar</div>3. Set the parents font-size to 0, and then adding some value to inline-block elementsbody{ margin: 0; /* removing the default body margin */}.parent{ font-size: 0; /* parent value */}.parent > div{ display: inline-block; width: 50%; font-size: 16px; /* some value */}.left{ background-color: aqua;}.right{ background-color: gold;}<div class="parent"> <div class="left">foo</div> <div class="right">bar</div></div>4. Using a negative margin between them (not preferable)body{ margin: 0; /* removing the default body margin */}div{ display: inline-block; width: 50%; margin-right: -4px; /* negative margin */}.left{ background-color: aqua;}.right{ background-color: gold;}<div class="left">foo</div><div class="right">bar</div>5. Dropping closing anglebody{ margin: 0; /* removing the default body margin */}div{ display: inline-block; width: 50%;}.left{ background-color: aqua;}.right{ background-color: gold;}<div class="left">foo</div><div class="right">bar</div><hr><div class="left">foo</div><div class="right">bar</div>6. Skipping certain HTML closing tags (thanks @thirtydot for the reference)body{ margin: 0; /* removing the default body margin */}ul{ margin: 0; /* removing the default ul margin */ padding: 0; /* removing the default ul padding */}li{ display: inline-block; width: 50%;}.left{ background-color: aqua;}.right{ background-color: gold;}<ul> <li class="left">foo <li class="right">bar</ul>References:Fighting the Space Between Inline Block Elements on CSS TricksRemove Whitespace Between Inline-Block Elements by David WalshHow to remove the space between inline-block elements?As @MarcosPérezGude said, the best way is to use rem, and add some default value to font-size on the html tag (like in HTML5Boilerplate). Example:html{ font-size: 1em;}.ib-parent{ /* ib -> inline-block */ font-size: 0;}.ib-child{ display: inline-block; font-size: 1rem;} 这篇关于两个内联块元素（每个50％宽）不在一行中并排放置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！ 08-31 02:28