Question

我使用轻度改编的Suckerfish菜单来提供（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>);
          }

渲染的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注释复选框看起来有嵌套结构，我该如何修复它？

谢谢，

Answer 1

问题是我的复选框左侧浮动，标签的文字比复选框的像素高，所以第二行的复选框将放在第一个复选框下方的位置。将行高更改为更高的值（字体大小也应该有效，但我不想更改字体大小）更正了行为AFAICT。

为什么我的Suckerfish-as-tooltip解决方案会逐步缩进元素？

1 个答案: