两个内联块元素（每个50％宽）不在一行中并排放置 [英] Two inline-block elements, each 50% wide, do not fit side by side in a single row

查看：814 发布时间：2017/1/18 12:09:21 html css

本文介绍了两个内联块元素（每个50％宽）不在一行中并排放置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

 <！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/ 。这工作正常。

但我的原始问题仍然存在。

解决方案

当使用<$时，为什么当两个div都保持为内联块元素时， c $ c> 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的< a href =http://stackoverflow.com/a/5078297/1763929>参考）
 
 
  
 
 
  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 < a> 
 
  如何删除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 elements



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>





2. Using HTML comments



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>





3. Set the parents font-size to 0, and then adding some value to inline-block elements



body{
  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 angle



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>

<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 Tricks
Remove Whitespace Between Inline-Block Elements by David Walsh
How 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％宽）不在一行中并排放置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
                        
                    

                    
                        查看全文

两个内联块元素（每个50％宽）不在一行中并排放置 [英] Two inline-block elements, each 50% wide, do not fit side by side in a single row

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

两个内联块元素（每个50％宽）不在一行中并排放置 [英] Two inline-block elements, each 50% wide, do not fit side by side in a single row

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭