换行后去除内联块元素的边距

Question

I'm hoping there's a way to do this without JavaScript.我希望有一种不用 JavaScript 就能做到这一点的方法。 I have two elements displayed with inline-block.我有两个用内联块显示的元素。 They are both 200 pixels in width and height, so they both appear on the same line unless the browser is sized very small (or with mobile browsers).它们的宽度和高度都是 200 像素，因此它们都出现在同一行上，除非浏览器的尺寸非常小（或移动浏览器）。 I want there to be a 50px space between the two elements, so on the second element I added "margin-left: 50px", which works fine.我希望两个元素之间有一个 50px 的空间，所以在第二个元素上我添加了“margin-left：50px”，效果很好。 When the browser is resized to a size where both elements cannot fit on the same line, the second element wraps to the next line, which is what I want it to do.当浏览器调整到两个元素不能放在同一行的大小时，第二个元素会换行到下一行，这就是我想要它做的。 The problem is that the second element still has the 50px left margin, so the elements don't appear centered.问题是第二个元素仍然有 50px 的左边距，所以元素不会出现居中。 I could add JavaScript to detect when the container height changes (ie the element wrapped to the next line) and remove the left margin, but is there a way to accomplish this without JavaScript?我可以添加 JavaScript 来检测容器高度何时发生变化（即元素包装到下一行）并删除左边距，但是有没有办法在没有 JavaScript 的情况下实现这一点？

Here's my code, simplified:这是我的代码，简化了：

<!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>

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

Answer 1

Based on bastianonm's solution, try this:基于 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/ http://jsfiddle.net/YRshx/6/

Answer 2

Here;sa different approach to the problem.在这里；解决问题的不同方法。 It exploits the fact that spaces are discarded if they are at the start or end of a line.它利用了空格在行首或行尾时被丢弃的事实。 So it uses a space to separate the blocks.所以它使用一个空格来分隔块。

Fidlle: http://jsfiddle.net/xKVG3/小提琴： 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>

Answer 3

You could do something similar to:你可以做类似的事情：

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

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

Answer 4

    <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>

Answer 5

Working jsFiddle Demo工作 jsFiddle 演示

Try to add margin to both left and right, and to your both elements:尝试为左右两边以及两个元素添加边距：

<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>

However based on your real layout, this trick maybe won't work, or need more things.但是，根据您的实际布局，此技巧可能不起作用，或者需要更多东西。

Answer 6

Just keep the inline container in a inline div and float them...只需将内联容器放在内联 div 中并浮动它们...

Code:-代码：-

<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>

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

Thanks...谢谢...

Answer 7

If you have more elements inside one container and wrap them evenly use below code it will work perfect.如果您在一个容器内有更多元素并将它们均匀包裹，请使用下面的代码，它将完美运行。

I am using UL, LI and minimal css我正在使用 UL、LI 和最小的 css

https://jsfiddle.net/mkpasala/ayw8szcn/ 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;
}

换行后去除内联块元素的边距

问题描述

7 个解决方案

解决方案1
14 已采纳 2013-06-07 07:04:27

解决方案2
6 2013-06-07 07:13:58

解决方案3
2 2013-06-07 06:43:15

解决方案4
1 2013-06-07 06:33:26

解决方案5
0

解决方案6
0 2013-06-07 06:40:05

解决方案7
0 2018-09-26 12:44:53

换行后去除内联块元素的边距

问题描述

7 个解决方案

解决方案1 14 已采纳 2013-06-07 07:04:27

解决方案2 6 2013-06-07 07:13:58

解决方案3 2 2013-06-07 06:43:15

解决方案4 1 2013-06-07 06:33:26

解决方案5 0

解决方案6 0 2013-06-07 06:40:05

解决方案7 0 2018-09-26 12:44:53

解决方案1
14 已采纳 2013-06-07 07:04:27

解决方案2
6 2013-06-07 07:13:58

解决方案3
2 2013-06-07 06:43:15

解决方案4
1 2013-06-07 06:33:26

解决方案5
0

解决方案6
0 2013-06-07 06:40:05

解决方案7
0 2018-09-26 12:44:53