我正在使用经过轻微调整的 Suckerfish 菜单来提供（1 深）工具提示解决方案。它在大多数意义上都运行良好，并且似乎是正确的解决方案。但是，虽然我希望下面屏幕截图中的所有复选框都与屏幕左侧对齐，但它们却是交错的。一个明显的猜测（对我来说）是我遗漏了一个关闭标签，但据我所知，检查我的 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>);
}
呈现的 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>
有什么我没有关闭的吗？我是否以错误的顺序关闭标签？我还在做什么导致 Suckerfish 注释的复选框似乎具有嵌套结构，我该如何解决？
谢谢，