javascript - 使用 prependTo() 时按钮之间的间距丢失

Question

我正在为户外动力设备经销商创建一个显示构建器应用程序，经销商可以在其中添加、删除和重新排列不同的显示部分。

显示部分列表位于名为 的 div 中部分控件。这个div包含左右两列(分别命名为leftCol和rightCol)，其中显示部分的名称在左边，按钮在右边:Image

如果经销商选择他们有 90"的墙高，那么默认的 96"Backpack Blower 部分将替换为 90"Backpack Blower 部分。这是通过隐藏原始 Backpack Blower 部分并在新部分前面添加来完成的到列表的顶部:Image

如您在上图中所见，按钮与其下方的其他按钮相比未对齐。此外，加号和减号按钮之间应该有一个空格。 Image 。我该如何调整？

这是我用于隐藏 96"Backpack Blower 部分并在其位置上添加 90"部分的代码:

if(wallHeight === "90"){ //If dealer has a 90 height, we need to show the 90" backpack blower display and hide the normal 96" backpack blower display
      $('<p>Backpack Blower <strong>(90" tall display)</strong></p>').prependTo("#sectionControls .leftCol");
      $("<input type='button' class = 'section-button section-remove-button' value='-'' id = 'remove90BackpackBlowerSectionBtn' onclick='remove90BackpackBlowerSection()'>").prependTo("#sectionControls .rightCol");
      $("<input type='button' class = 'section-button' value='+'' id = 'add90BackpackBlowerSectionBtn' onclick='add90BackpackBlowerSection()'>").prependTo("#sectionControls .rightCol");
      $('<input type="button" class = "section-info-button" value="i" id = "90BackpackBlowerSectionInfoBtn" onclick ="show90BackpackBlowerSectionInfo()">').prependTo("#sectionControls .rightCol");

      //Hide 96" backpack blower section
      $("#96BackpackBlowerText").hide();
      $("#backpackBlowerSectionInfoBtn").hide();
      $("#addBackpackBlowerSectionBtn").hide();
      $("#remove90BackpackBlowerSectionBtn").hide();    
}

这是 sectionControls、leftCol、rightCol 和按钮的 CSS:

#sectionControls{display:inline-block;}

.leftCol{display:inline-block; margin-left:40px; margin-right:40px;}
.rightCol{display:inline-block;}

.section-button, .section-info-button{background-color: #F15C22; border: none; color: white; margin-bottom:10px; padding: 5px 30px; text-align: center; text-decoration: none; display:inline-block; font-size: 16px;}
.section-button:hover, .section-button:active{background-color:#000000;}
.section-info-button{background-color:gray; margin-right:10px; padding:5px 15px;}

这是原始的 HTML

 <div id = "sectionControls">
  <h1>Display Sections</h1>
  <div class = "leftCol">
  <p id ="96BackpackBlowerText">Backpack Blower</p>
  <p>Handheld and Backpack Blowers</p>
  <p>Chainsaw</p>
  <p>Hedge Trimmer</p>
  <p>Trimmer</p>
  <p>Accessories</p>
  <p>PAS</p>
  <p>Cordless</p>
</div>

<div class = "rightCol">
  <input type="button" class = "section-info-button" value="i" id = "backpackBlowerSectionInfoBtn" onclick ="showBackpackBlowerSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addBackpackBlowerSectionBtn" onclick="addBackpackBlowerSection()"> 
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeBackpackBlowerSectionBtn" onclick="removeBackpackBlowerSection()">

  <br>

  <input type="button" class = "section-info-button" value="i" id = "handheldAndBackpackBlowerSectionInfoBtn" onclick ="showHandheldAndBackpackBlowerSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addHandheldAndBackpackBlowerSectionBtn" onclick="addHandheldAndBackpackBlowerSection()">
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeHandheldAndBackpackBlowerSectionBtn" onclick="removeHandheldAndBackpackBlowerSection()">

  <br>

  <input type="button" class = "section-info-button" value="i" id = "chainsawSectionInfoBtn" onclick ="showChainsawSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addChainsawSectionBtn" onclick="addChainsawSection()"> 
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeChainsawSectionBtn" onclick="removeChainsawSection()"> 

  <br>

  <input type="button" class = "section-info-button" value="i" id = "hedgeTrimmerSectionInfoBtn" onclick ="showHedgeTrimmerSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addHedgeTrimmerSectionBtn" onclick="addHedgeTrimmerSection()"> 
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeHedgeTrimmerSectionBtn" onclick="removeHedgeTrimmerSection()"> 


  <br>

  <input type="button" class = "section-info-button" value="i" id = "trimmerSectionInfoBtn" onclick ="showTrimmerSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addTrimmerSectionBtn" onclick="addTrimmerSection()"> 
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeTrimmerSectionBtn" onclick="removeTrimmerSection()"> 

  <br>

  <input type="button" class = "section-info-button" value="i" id = "accessoriesSectionInfoBtn" onclick ="showAccessoriesSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addAccessoriesSectionBtn" onclick="addAccessoriesSection()"> 
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeAccessoriesSectionBtn" onclick="removeAccessoriesSection()"> 

  <br>

  <input type="button" class = "section-info-button" value="i" id = "pasSectionInfoBtn" onclick ="showPasSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addPasSectionBtn" onclick="addPasSection()"> 
  <input type="button" class = "section-button section-remove-button" value="-" id = "removePasSectionBtn" onclick="removePasSection()"> 

  <br>

  <input type="button" class = "section-info-button" value="i" id = "cordlessSectionInfoBtn" onclick ="showCordlessSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addCordlessSectionBtn" onclick="addCordlessSection()"> 
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeCordlessSectionBtn" onclick="removeCordlessSection()"> 
</div>
</div>

Answer 1

事实证明，您的 HTML 中的间距在这里实际上很重要(我知道通常情况下不是这样)。

看看这个 JSFiddle .请注意，当我从第二行的 input 标记之间删除空格时，它们之间的空格消失了。

没有很好的解决方案，因为浏览器实际上正在使用空白。一种选择是使用如下跨度以编程方式插入空格:

    $("<span> </span>").prependTo("#sectionControls .rightCol");

更好的选择是从 HTML 中删除空格并添加边距。 This answer有许多不同的方法可以做到这一点。

编辑:为了至少使所有内容保持一致，我删除了 input 标记之间的空格。

之前:

  <input type="button" class = "section-info-button" value="i" id = "handheldAndBackpackBlowerSectionInfoBtn" onclick ="showHandheldAndBackpackBlowerSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addHandheldAndBackpackBlowerSectionBtn" onclick="addHandheldAndBackpackBlowerSection()">
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeHandheldAndBackpackBlowerSectionBtn" onclick="removeHandheldAndBackpackBlowerSection()">

之后:

   <input type="button" class = "section-info-button" value="i" id = "handheldAndBackpackBlowerSectionInfoBtn" onclick ="showHandheldAndBackpackBlowerSectionInfo()"><input type="button" class = "section-button" value="+" id = "addHandheldAndBackpackBlowerSectionBtn" onclick="addHandheldAndBackpackBlowerSection()"><input type="button" class = "section-button section-remove-button" value="-" id = "removeHandheldAndBackpackBlowerSectionBtn" onclick="removeHandheldAndBackpackBlowerSection()">