css - 奇怪的按钮间距

Question

我在这个CodePen中的按钮有轻微的 CSS 问题。

第一个似乎是间隔我的按钮，我不知道为什么。但是，如果您单击 + 按钮添加更多表格，那么奇怪的间距就消失了，它遵循我的输入类型按钮边距样式。

我怎样才能解决这个问题？

Answer 1

因为基本上，当您处理内联元素时，空格很重要。源代码中的<input>s 用空格隔开；注入的（由JS）不是。

对此有多种解决方案，其中大多数都列在这个问题中（我建议将它们全部检查，而不仅仅是接受的一个）。反过来，这些可以分为...

1）“标签冲突”，删除元素之间的空白。可以这样做...

  <input type="button" class="some_class"
/><input type="button" class="some_class"
/><input type="button" class="some_class" />

……或者像这样……

   <input type="button" class="some_class" /><!-- 
--><input type="button" class="some_class" /><!--
--><input type="button" class="some_class" />

2）“风格崩溃” - 留下空白，但使其不可见。在没有简单解决方案的情况下，通常这涉及在这些内联元素周围创建一些容器，并将其 font-size 和 line-height 设置为 0。

这种方法的缺点是您必须为该容器内的元素恢复这些属性。

3) 'floating' - 将所有内联元素变成块，对它们应用 'float' 样式。这样，空白也会在视觉上消失。

Answer 2

我有更好的解决方案。

只需将“font-size:0”添加到父标记“”，然后将“font-size:13px”添加到输入按钮（到类“.togPTbutton”）。

我刚刚在您的代码及其工作上尝试了上述内容。