换行后删除 inline-block 元素上的边距答案

【问题标题】：Removing margin on inline-block element after wrapping lines换行后删除 inline-block 元素上的边距
【发布时间】：2013-06-03 09:05:26
【问题描述】：

我希望有一种方法可以在没有 JavaScript 的情况下做到这一点。我有两个使用 inline-block 显示的元素。它们的宽度和高度均为 200 像素，因此它们都出现在同一行，除非浏览器的尺寸非常小（或使用移动浏览器）。我希望两个元素之间有 50px 的空间，所以在第二个元素上我添加了“margin-left：50px”，效果很好。当浏览器调整到两个元素不能放在同一行的大小时，第二个元素会换行到下一行，这就是我想要它做的。问题是第二个元素仍然有 50px 的左边距，所以元素没有出现居中。我可以添加 JavaScript 来检测容器高度何时发生变化（即包裹到下一行的元素）并删除左边距，但是有没有办法在没有 JavaScript 的情况下实现这一点？

这是我的简化代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <body>
        <div id="wrapper" style="text-align: center;">
            <div id="elem1" style="display: inline-block; background-color: #f00; width: 200px; height: 200px;"></div>
            <div id="elem2" style="display: inline-block; background-color: #00f; width: 200px; height: 200px; margin-left: 50px;"></div>
        </div>
    </body>
</html>

小提琴：http://jsfiddle.net/YRshx/

【问题讨论】：

可能感兴趣barrelny.com/blog/text-align-justify-and-rwd
我认为这会奏效。这是一个非常酷的技术。让我试一试...
实际上，我应该从演示中意识到这在我的情况下不起作用，因为在包装之后，元素左对齐，而不是居中。不过谢谢，我肯定可以在将来使用这种技术。

标签： html css

【解决方案1】：

这是解决问题的不同方法。它利用了空格在行首或行尾被丢弃的事实。所以它使用空间来分隔块。

小提琴：http://jsfiddle.net/xKVG3/

<div id="wrapper">
  <div><div id="elem1"></div></div>
  <div><div id="elem2"></div></div>
</div>

#wrapper { text-align:center; }

#wrapper > div > div { 
    display: inline-block; 
    width: 200px; 
    height: 200px; 
    vertical-align:top;
}

#elem1 {
    background-color: #f00;
}
    
#elem2 {
    background-color: #00f;
}

#wrapper > div {
    display:inline;
}

#wrapper > div:after {
    content: ' ';
    font-size:12.5em;
    line-height:0px;
}

#wrapper { text-align:center; }

#wrapper > div > div { 
    display: inline-block; 
    width: 200px; 
    height: 200px; 
    vertical-align:top;
}

#elem1 {
    background-color: #f00;
}
    
#elem2 {
    background-color: #00f;
}

#wrapper > div {
    display:inline;
}

#wrapper > div:after {
    content: ' ';
    font-size:12.5em;
    line-height:0px;
}

#wrapper  {
  border:2px solid black;
  animation: 4s linear 0s infinite alternate wide;
}

@keyframes wide { 
  from { width: 490px; } 
  to { width: 430px; }  
}

<div id="wrapper">
  <div><div id="elem1"></div></div>
  <div><div id="elem2"></div></div>
</div>

【讨论】：

【解决方案2】：

如果您在一个容器内有更多元素并将它们均匀包装，请使用下面的代码，它将完美运行。

我正在使用 UL、LI 和最小的 css

https://jsfiddle.net/mkpasala/ayw8szcn/

<h1>Wrap children evenly</h1>
<ul class="skillscont-list">
  <li>TestSkill</li>
  <li>TestSkill1</li>
  <li>TestSkill2</li>
  <li>Test - Skill</li>
  <li>Chat-Skill</li>
  <li>testing disposition</li>
  <li>Narender</li>
  <li>Inya</li>
  <li>Chat_Inya</li>
  <li>Agent1</li>
  <li>agenttwo</li>
  <li>mahender</li>
  <li>naresh</li>
  <li>venkat-skill</li>
  <li>English</li>
  <li>French</li>
  <li>testpoc</li>
  <li>mahender1</li>
  <li>devskill</li>
  <li>praveen</li>
</ul>


.skillscont-list{
    margin: 0px;
    padding: 0px;
    overflow: overlay;
    list-style-type:none;
}
.skillscont-list li{
    border:1px solid black;
    float: left;
    widht: auto;
    padding: 5px 10px;
    margin: 5px;
    color:white;
    font-weight:bold;
    background-color:gray;
}

【讨论】：

【解决方案3】：

根据 bastianonm 的解决方案，试试这个：

    <div id="wrapper" style="text-align: center; margin:0 -25px;">
        <div id="elem1" style="display: inline-block; background-color: #f00; width: 200px; height: 200px; margin:0 25px;"></div>
        <div id="elem2" style="display: inline-block; background-color: #00f; width: 200px; height: 200px; margin:0 25px;"></div>
    </div>

http://jsfiddle.net/YRshx/6/

【讨论】：

就是这样！谢谢马克斯。唯一的事情是我必须添加另一个带有溢出的包装 div：隐藏，因为您的负边距创建了恒定的滚动条。这是一个新的小提琴：jsfiddle.net/WhnEp

【解决方案4】：

你可以做类似的事情：

@media screen and (max-width: 453px){
    #elem2 { margin-left:0 !important; }
}

http://jsfiddle.net/YRshx/3/

【讨论】：

这种技术可行。我不是特别喜欢像这样对最大宽度进行硬编码，但也许这是我唯一的选择。我会看看其他回复，但到目前为止，我认为这是最好的解决方案。

【解决方案5】：

只需将内联容器保持在内联 div 中并浮动它们...

代码：-

<div id="wrapper" style="text-align: center;">
    <div id="outer" style="display: inline-block;">
    <div id="elem1" style="float:left; background-color: #f00; width: 200px; height: 200px;"></div>
    <div id="elem2" style="float:left; background-color: #00f; width: 200px; height: 200px; margin-left: 50px;"></div>
    </div>
</div>

演示：- http://jsfiddle.net/YRshx/2/

谢谢...

【讨论】：

jsfiddle 似乎与我的原始代码没有什么不同？

【解决方案6】：

Working jsFiddle Demo

尝试为左右以及两个元素添加边距：

<div id="wrapper" style="text-align: center;">
    <div id="elem1" style="margin: 0 25px; display: inline-block; background-color: #f00; width: 200px; height: 200px;"></div>
    <div id="elem2" style="margin: 0 25px; display: inline-block; background-color: #00f; width: 200px; height: 200px;"></div>
</div>

但是根据你的真实布局，这个技巧可能行不通，或者需要更多的东西。

【讨论】：

【解决方案7】：

    <div id="wrapper" style="text-align: center;">
        <div id="elem1" style="float:left; display: inline-block; background-color: #f00; width: 200px; height: 200px; margin:0 25px;"></div>
        <div id="elem2" style="float:left; display: inline-block; background-color: #00f; width: 200px; height: 200px; margin:0 25px;"></div>
    </div>

【讨论】：

谢谢，bastianonm。我应该说我想避免在第一个元素上有边距。认为没有那个也能做到这一点？
@Gavin 鉴于您无论如何都将项目居中，如果不在第一个项目上设置边距，您会获得什么效果？
包装主要针对移动设备。当浏览器非常小时，我不想要任何边距，因为移动设备上的空间有限。
@Gavin 可以通过在 wrapper 上设置负边距来解决。
是的。包装器上的-50 和两个内联块上的50。无需其他调整。