Question

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

显示部分的列表位于名为{{1 }}。该div包含左右两列（分别为sectionControls和leftCol），其中显示部分的名称在左侧，按钮在右侧：Image

但是，如果经销商选择壁高为90英寸，则默认的96英寸背包鼓风机部分将替换为90英寸背包鼓风机部分。这是通过隐藏原始的背包鼓风机部分并在新部分之前添加来完成的到列表顶部：Image

如上图所示，按钮与下方的按钮相比没有对齐。另外，加号和减号按钮之间应有一个空格。 Image。我该如何调整？

这是我的代码，用于隐藏96英寸背包鼓风机部分并放在90英寸部分的位置：

rightCol

以下是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和按钮的CSS：

rightCol

这是原始HTML

#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;}

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()">

使用prependTo（）

1 个答案: