我添加了一个admin\\u bar节点。该节点中的每个项都有数量可变的子项。我想在项目标题右侧显示每个“浮动”项目的子项目数（项目标题和子项目数之间有一些空格），如所示：

我可以做到以下几点：

PHP

add_action( \'admin_bar_menu\', \'add_my_admin_bar_node\' );
function add_my_admin_bar_node() {
    global $wp_admin_bar;

    $args =  array(
        \'id\'    => \'my-admin-bar-node\',
        \'parent\' => \'top-secondary\',
        \'title\' => \'My Admin Bar Node\',
    );
    $wp_admin_bar->add_node( $args );
    $children = array(
        \'item-1\' => array(
            \'child-1\',
            \'child-2\',
        ),
        \'item-2\' => array(
            \'child-1\',
            \'child-2\',
            \'child-3\',
        ),
    );
    foreach ( $children as $child => $node ) {
        $title = ucfirst( str_replace( \'-\', \' \', $child ) );
        // append the number of children to the title
        $title .= "<span class=\'num_children\'>" . count( $node ) . \'</span>\';
        $args = array(
            \'id\' => $child,
            \'parent\' => \'my-admin-bar-node\',
            \'title\' => $title,
        );
        $wp_admin_bar->add_node( $args );
        foreach ( $node as $inner_child ) {
            $title = ucfirst( str_replace( \'-\', \' \', $inner_child ) );
            $args = array(
                \'id\' => $child . \'-\' . $inner_child,
                \'parent\' => $child,
                \'title\' => $title,
            );
            $wp_admin_bar->add_node( $args );
        }
    }
}

CSS

#wpadminbar #wp-admin-bar-my-admin-bar-node {
    float: left;
}
#wpadminbar #wp-admin-bar-my-admin-bar-node .num_children {
    /* using float: right; doesn\'t work */
    margin: 0 1em;
    position: absolute;
    right: 0;
    top: -3px;
}

这一切都很好。

但是，如果任何节点的项目标题比min-width 这是WP设定的.ab-item （140px）长项目标题与子项计数重叠。在我的实际应用程序中，项目标题是从数据库中提取的，其中许多标题的宽度超过140px，如：

当然，使用javascript，我可以设置显式宽度#wp-admin-bar-my-admin-bar-node-default 并制作我想要的显示器：

但必须有一个纯CSS来做这件事，我只是不知道它是什么。据我所知，问题是WP设置position: relative; 和position: absolute; admin\\u栏标记中的各种元素使我的简单CSS无法处理长项目标题。

有人能建议更改我的CSS和/或添加到项目标题中的标记吗(<span class=\'num_children\'>xxx</span>) 无论项目标题有多宽，都能做到这一点？

#wpadminbar #wp-admin-bar-my-admin-bar-node-default > li > .ab-item {
    padding-right: 45px;
}