Question

我想知道如果不修改HTML就可以实现这一点，但是，假设你有一个动态添加的可变宽度的内联块元素列表。你不希望元素和父元素之间有任何边缘，但是如果它们开始形成两条线，你想在它们之间留一些空间。我已经尝试::first-line，但它对边距不起作用。那么有谁知道如何做到这一点？

举个例子：

＆＃13;

.parent {
  margin: 20px;
  background: #555;
  padding: 1px;
}
.parent p {
  display: inline-block;
  margin: 0;
  margin-right: 5px;
  padding: 0;
  background: #CCC;
}
.parent::first-line {
  margin-bottom: 10px;/* not working */
}

＆＃13;

<div class="parent">
  <p>Lorem ipsum dolor</p>
  <p>sit amet,</p>
  <p>consectetur adipisicing elit.</p>
  <p>Tempora,</p>
  <p>numquam, reiciendis.</p>
  <p>Voluptatum molestias,</p>
  <p>sequi iste itaque corporis ducimus,</p>
  <p>vero commodi sed fugiat</p>
  <p>qui a perferendis sint,</p>
  <p>magnam doloribus quidem.</p>

</div>

＆＃13;

Answer 1

这可以通过为孩子设置margin-top和向父母设置negative margin来实现。通过这个，它将把孩子们拉到顶部去除他们之间的空间。

Bootstrap的row和col-以这种方式工作。

.parent {
  margin: -18px 0;
  background: #555;
  padding: 1px;
}
.parent p {
  display: inline-block;
  margin: 0;
  margin-right: 5px;
  padding: 0;
  background: #CCC;
  margin-top: 10px;
}

<div class="parent">
  <p>Lorem ipsum dolor</p>
  <p>sit amet,</p>
  <p>consectetur adipisicing elit.</p>
  <p>Tempora,</p>
  <p>numquam, reiciendis.</p>
  <p>Voluptatum molestias,</p>
  <p>sequi iste itaque corporis ducimus,</p>
  <p>vero commodi sed fugiat</p>
  <p>qui a perferendis sint,</p>
  <p>magnam doloribus quidem.</p>
  <p>sequi iste itaque corporis ducimus,</p>
  <p>vero commodi sed fugiat</p>
  <p>qui a perferendis sint,</p>
  <p>magnam doloribus quidem.</p>
  <p>sequi iste itaque corporis ducimus,</p>
  <p>vero commodi sed fugiat</p>
  <p>qui a perferendis sint,</p>
  <p>magnam doloribus quidem.</p>
  <p>sequi iste itaque corporis ducimus,</p>
  <p>vero commodi sed fugiat</p>
  <p>qui a perferendis sint,</p>
  <p>magnam doloribus quidem.</p>
</div>

Answer 2

首先，＆＃34;父母＆＃34;是为div定义的类，所以你试图将底部边距应用于div，这是错误的，

解决方法是将代码修改为：

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .parent {
              margin: 20px;
              background: #555;
              padding: 1px;
            }
            .parent p {
              display: inline-block;
              margin: 0;
              margin-right: 5px;
              padding: 0;
              background: #CCC;
            }
            .parent p::first-line {            //Line modified by Dixit, added " p"
              margin-bottom: 10px;/* not working */
            }
        </style>
    </head>
    <body>
        <div class="parent">
      <p>Lorem ipsum dolor</p>
      <p>sit amet,</p>
      <p>consectetur adipisicing elit.</p>
      <p>Tempora,</p>
      <p>numquam, reiciendis.</p>
      <p>Voluptatum molestias,</p>
      <p>sequi iste itaque corporis ducimus,</p>
      <p>vero commodi sed fugiat</p>
      <p>qui a perferendis sint,</p>
      <p>magnam doloribus quidem.</p>

    </div>
    </body>
    </html>

但是它仍然不起作用，原因是因为你已经将边距设置为0，在.parent p {}块中，你可以通过删除的方式实现它保证金：0;来自.parent p {}块的行将生成以下代码。

＆＃13;

.parent {
  margin: 20px;
  background: #555;
  padding: 1px;
}
.parent p {
  display: inline-block;
  //Line removed by Dixit, Line : margin:0px;
  margin-right: 5px;
  padding: 0;
  background: #CCC;
}
.parent p::first-line {
  //Line modified by Dixit, added " p"
  margin-bottom: 10px;
  /* not working */
}

＆＃13;

<div class="parent">
  <p>Lorem ipsum dolor</p>
  <p>sit amet,</p>
  <p>consectetur adipisicing elit.</p>
  <p>Tempora,</p>
  <p>numquam, reiciendis.</p>
  <p>Voluptatum molestias,</p>
  <p>sequi iste itaque corporis ducimus,</p>
  <p>vero commodi sed fugiat</p>
  <p>qui a perferendis sint,</p>
  <p>magnam doloribus quidem.</p>
</div>

＆＃13;

Answer 3

您可以添加给定的脚本以了解P的第一个和最后一个元素的顶部位置，并且可以删除第一行中Ps的上边距，并且可以删除最后一行中Ps的下边距。

    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript">
    $( document ).ready(function() {

        $("p").each(function( index ) 
        {
            var offsetMin =$("p:first-child").offset().top;
            var offsetMax =$("p:last-child").offset().top;
            if($(this).offset().top==offsetMax)
            {                   
                $(this).css("margin-bottom","0px");
            }
            else if($(this).offset().top==offsetMin)
            {
                $(this).css("margin-top","0px");
            }               
        });
    });
</script>

如何垂直空间（margin-possible）内联块元素列表？

3 个答案: