Javascript 为什么我的吸盘鱼作为工具提示解决方案会逐渐缩进元素？

我正在使用略微调整的吸盘鱼菜单来提供（1-deep）工具提示解决方案。从大多数意义上讲，它运行良好，似乎是正确的解决方案。然而，虽然我希望下面屏幕截图上的所有复选框与屏幕左侧对齐，但它们是交错的。（对我来说）一个明显的猜测是，我遗漏了一个关闭标记，但就我所能辨别的而言，对我的JSX源代码和Chrome的检查器的检查看起来是平衡的

截图为：

资料来源：

          var individual_checkbox = (
            <ul data-marker="1" className="inline has-tooltip">
              <li className="has-tooltip">
                <input type="checkbox" name={'hide-' + day.year + '-' +
                  (day.month + 1) + '-' + day.date + '.' +
                  id_lookup[JSON.stringify(activity)]}
                  id={'hide-' + day.year + '-' + (day.month + 1) + '-' +
                  day.date + '.' + id_lookup[JSON.stringify(activity)]}
                  onChange={that.hide_instance}
                  className="hide-instance" />
                <ul className="tooltip">
                  <li className="tooltip">
                    Done.
                  </li>
                </ul>
              </li>
            </ul>
          );
          if (activity.hasOwnProperty('frequency')) {
            var series_checkbox = (
              <ul data-marker="2" className="inline has-tooltip">
                <li className="has-tooltip">
                  <input type="checkbox" name={'hide.' +
                    id_lookup[JSON.stringify(activity)]}
                    onChange={that.hide_series}
                    className="hide-series" />
                  <ul className="tooltip">
                    <li className="tooltip">
                      Cancel this whole series.
                    </li>
                  </ul>
                </li>
              </ul>
            );
          } else {
            var series_checkbox = '';
          }
          // console.log('Reached here!');
          // console.log(this.state.entries);
          if (activity.all_day) {
            rendered_activities.push(<li
              data-marker="3">{individual_checkbox}
              {series_checkbox} <span
              dangerouslySetInnerHTML={{__html:
              converter.makeHtml(activity.description)
              .replace('<p>', '').replace('</p>', '')}}
              /></li>);
          } else if (activity.minutes) {
            rendered_activities.push(<li
              data-maker="4">{individual_checkbox}
              {series_checkbox} <span
              dangerouslySetInnerHTML={{__html:
              hour_options[activity.hours][1] + ':' +
              minute_options[activity.minutes][1] + ' ' +
              converter.makeHtml(activity.description)
              .replace('<p>', '').replace('</p>', '')}}
              /></li>);
          } else {
            if (activity.description) {
              var description = converter.makeHtml(activity.description
                ).replace('<p>', '').replace('</p>', '');
            } else {
              var description = '';
            }
            rendered_activities.push(<li
              data-marker="5">{individual_checkbox}
              {series_checkbox} <span
              dangerouslySetInnerHTML={{__html:
              hour_options[activity.hours][1] + ' ' +
              description}} /></li>);
          }

var单个\u复选框=(




完成。




);
if（activity.hasOwnProperty（'frequency'））{
变量系列\u复选框=(




取消整个系列。




);
}否则{
var series_复选框=“”；
}
//console.log（'reach here！'）；
//console.log（this.state.entries）；
if（全天活动）{
呈现的活动。推送（
{单个复选框}
{series_checkbox}
）；
}else if（活动分钟）{
呈现的活动。推送（
{单个复选框}
{series_checkbox}
）；
}否则{
if（活动描述）{
var description=converter.makeHtml（activity.description
).替换（“”，“”）。替换（“
”，“”）；
}否则{
变量描述=“”；
}
呈现的活动。推送（
{单个复选框}
{series_checkbox}
）；
}

呈现的HTML打印精美，如下所示：

<ul class="activities" data-reactid=".0.3.3:2">
    <li data-marker="3" data-reactid=".0.3.3:2.0">
        <ul class="inline has-tooltip" data-marker="1" data-reactid=
        ".0.3.3:2.0.0">
            <li class="has-tooltip" data-reactid=".0.3.3:2.0.0.0">
                <input class="hide-instance" data-reactid=
                ".0.3.3:2.0.0.0.0" id="hide-2015-9-18.2" name=
                "hide-2015-9-18.2" type="checkbox" />
                <ul class="tooltip" data-reactid=".0.3.3:2.0.0.0.1">
                    <li class="tooltip" data-reactid=".0.3.3:2.0.0.0.1.0">
                    Done.</li>
                </ul>
            </li>
        </ul><span data-reactid=".0.3.3:2.0.1"></span> <span data-reactid=
        ".0.3.3:2.0.2"></span><span data-reactid=".0.3.3:2.0.3">Test
        2.</span>
    </li>
    <li data-marker="3" data-reactid=".0.3.3:2.1">
        <ul class="inline has-tooltip" data-marker="1" data-reactid=
        ".0.3.3:2.1.0">
            <li class="has-tooltip" data-reactid=".0.3.3:2.1.0.0">
                <input class="hide-instance" data-reactid=
                ".0.3.3:2.1.0.0.0" id="hide-2015-9-18.2" name=
                "hide-2015-9-18.2" type="checkbox" />
                <ul class="tooltip" data-reactid=".0.3.3:2.1.0.0.1">
                    <li class="tooltip" data-reactid=".0.3.3:2.1.0.0.1.0">
                    Done.</li>
                </ul>
            </li>
        </ul><span data-reactid=".0.3.3:2.1.1"></span> <span data-reactid=
        ".0.3.3:2.1.2"></span><span data-reactid=".0.3.3:2.1.3">Test
        2.</span>
    </li>
    <li data-marker="5" data-reactid=".0.3.3:2.2">
        <ul class="inline has-tooltip" data-marker="1" data-reactid=
        ".0.3.3:2.2.0">
            <li class="has-tooltip" data-reactid=".0.3.3:2.2.0.0">
                <input class="hide-instance" data-reactid=
                ".0.3.3:2.2.0.0.0" id="hide-2015-9-18.1" name=
                "hide-2015-9-18.1" type="checkbox" />

                <ul class="tooltip" data-reactid=".0.3.3:2.2.0.0.1">
                    <li class="tooltip" data-reactid=".0.3.3:2.2.0.0.1.0">
                    Done.</li>
                </ul>
            </li>
        </ul><span data-reactid=".0.3.3:2.2.1"></span> <span data-reactid=
        ".0.3.3:2.2.2"></span><span data-reactid=".0.3.3:2.2.3">12PM
        Test.</span>
    </li>
    <li data-marker="5" data-reactid=".0.3.3:2.3">
        <ul class="inline has-tooltip" data-marker="1" data-reactid=
        ".0.3.3:2.3.0">
            <li class="has-tooltip" data-reactid=".0.3.3:2.3.0.0">
                <input class="hide-instance" data-reactid=
                ".0.3.3:2.3.0.0.0" id="hide-2015-9-18.1" name=
                "hide-2015-9-18.1" type="checkbox" />

                <ul class="tooltip" data-reactid=".0.3.3:2.3.0.0.1">
                    <li class="tooltip" data-reactid=".0.3.3:2.3.0.0.1.0">
                    Done.</li>
                </ul>
            </li>
        </ul><span data-reactid=".0.3.3:2.3.1"></span> <span data-reactid=
        ".0.3.3:2.3.2"></span><span data-reactid=".0.3.3:2.3.3">12PM
        Test.</span>
    </li>
</ul>

完成了


测试
2.






完成了


测试
2.






完成了


12点
测验






完成了


12点
测验

有什么我不想说的吗？我是否按错误的顺序关闭标签？我还做了什么导致带吸盘鱼注释的复选框出现嵌套结构，我如何修复它

---

谢谢，

问题是我的复选框向左浮动，标签的文本比复选框高的像素少，因此第二行的复选框将位于第一个复选框的正下方。将行高更改为更高的值（字体大小也应该有效，但我不想更改字体大小）纠正了AFAICT的行为。

相切，但可能有用：JSX实际上不能不平衡，因为它可以传输到

createElement

调用。JSX标记不平衡会导致语法/分析错误。@BinaryMuse很高兴知道；看看我的答案。