删除两个wordpress循环元素之间的内联块空间？答案

【问题标题】：Remove inline-block space between two wordpress loop elements?删除两个wordpress循环元素之间的内联块空间？
【发布时间】：2013-10-10 20:01:39
【问题描述】：

如何删除作为 wordpress 循环一部分的两个 div 之间的内联块空间？它们应该并排放置，每个宽度为 50%。我意识到我可以将宽度更改为 49% 或使用浮点数，但如果可能的话，我想保持这种方式。

我知道您通常可以通过使用 cmets 消除编码中的空格来做到这一点，如下所示：

<div class="before-after">
  <img src="images/ba_01.jpg" alt="">
  <h4>Frick TDSH 355XL<br><small>Slide Valve and Rotor Housing</small></h4>
</div><!-- this comment here eleminates the spacing 
--><div class="before-after">
  <img src="images/ba_02.jpg" alt="">
  <h4>Frick NGC300 Gear Plate</h4>
</div>

这是我的 wordpress 循环，无论我把评论放在哪里，仍然会在实际返回的 html 中添加空格。

<?php 
  $my_query = new WP_Query(
    array( 
      'cat' => '2',             
    ) 
  );

  while ( $my_query->have_posts() ) : $my_query->the_post();
?>  
<div class="before-after">
  <?php 
    if ( has_post_thumbnail() ) { 
      the_post_thumbnail();
    } 
  ?>
  <h4><?php the_title(); ?><br><small><?php the_content(); ?></small></h4>
</div><!-- --><?php endwhile;?><?php wp_reset_postdata();?>

这就是开发者工具中显示的内容：

<div class="before-after">...</div>
<!---->
<div class="before-after">...</div>
<!---->

我确定我只是忽略了一些简单的事情，但我们将不胜感激。谢谢！

@Prusprus 这里直接来自源代码：

<div class="before-after">
    <img width="500" height="300" src="http://localhost:8888/wp-content/uploads/2013/10/ba_02.jpg" class="attachment-post-thumbnail wp-post-image" alt="Frick NGC300 Gear Plate" />
    <h4>Frick NGC300 Gear Plate<br><small></small></h4>
</div>
<!---->
<div class="before-after">
    <img width="500" height="300" src="http://localhost:8888/wp-content/uploads/2013/10/ba_01.jpg" class="attachment-post-thumbnail wp-post-image" alt="Frick TDSH 355XL" />
    <h4>Frick TDSH 355XL<br><small><p>Slide Valve and Rotor Housing</p>
    </small></h4>
</div>
<!---->

【问题讨论】：

你能粘贴直接从源代码返回的内容吗？我认为开发人员工具可能会重新格式化代码留置权以便更好地阅读。
在 PHP 结束标记和
标记之间有一个换行符（示例代码中的第 9 行和第 10 行）。你试过关闭它吗？
就是这样！我非常担心循环的结束，我什至没有想到这一点。不确定我是否会将两个和两个放在一起。感谢您指出！

标签： php html css wordpress

【解决方案1】：

可能有另一种方法可以将其标记为已回答，不确定，但@Prusprus 在上面的评论中给了我解决方案。

我只需要在关闭 php 标记和我的 div 开头之间的代码开头删除一个换行符。

【讨论】：

我正要建议将所有有问题的 php 放在一行中，然后系统地破坏代码以提高可读性，每次检查以隔离问题。
这正是我下次要开始的地方。谢谢！
用户可能也应该对评论进行投票，以赋予真实答案更多的权重。此外，@Prusprus 可以删除并重新发布答案。

【解决方案2】：

浮动内联块元素的传统方式可以纠正这个问题，但由于它不受欢迎，还有另一种方式。

您还可以将父元素的字母间距设置为 -0.31em 来解决此问题，并将 div 本身的字母间距设置为正常。我会在几秒钟内设置一个 jsfiddle。

代码

.row {
     letter-spacing:-0.31em;
}
.col {
     letter-spacing:normal;
     display:inline-block;
     width:50%;
}

祝你好运！

【讨论】：

上面的建议已修复，但感谢您的帮助！你的方法可行，但我必须在我的 div 周围添加一个容器 div 来更改字母间距，在这种情况下，我只是不想要额外的标记。不过谢谢！

【解决方案3】：

这里有两种方法

将父级的 font-size 设置为 0，然后在 inline-block 元素上恢复它。
对最后一个 div 应用适当的边距。

DEMO x 2

HTML

<div class="opt1">
    <div class="before-after"></div>
    <div class="before-after"></div>
</div>

<div class="opt2">
    <div class="before-after"></div>
    <div class="before-after"></div>
</div>

CSS

.opt1, .opt2 {    
    margin:10px;
    border:1px solid green;
}

.before-after {
    display:inline-block;
    background:lightgrey;
    width:50%;
    height:100px;
    font-size:16px
    font-size:1rem;
}

.opt1 {
     font-size:0;
}

.opt2 .before-after{
    vertical-align:top;
}

.opt2 .before-after:last-child {
    margin-left:-.25em;

}

【讨论】：

非常感谢您的帮助！这两种方法都很好用，但是在这个特定的例子中，我想在不添加任何额外容器 div 的情况下这样做。不过，我肯定会在未来保留这个解决方案。再次感谢！