Javascript HTML对齐下拉列表元素

我想在下拉列表中插入自定义元素（不是简单的链接）。 这是我的密码：

    <div class="container">
    <div class="btn-group" dropdown is-open="status.isopen">
        <button id="single-button" type="button" class="btn btn-primary" dropdown-toggle ng-disabled="disabled">
            Button dropdown <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
            <li role="menuitem"><a href="#">Action</a></li>
            <li role="menuitem">
                <div style="display:block">
                    <span>Action</span>
                    <button type="submit" class="invisible-input pull-right"><i class="fa fa-check-circle-o fa-lg"></i></button>
                    <button type="submit" class="invisible-input pull-right"><i class="fa fa-times-circle-o fa-lg"></i></button>
                </div>
            </li>
            <li role="menuitem"><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li role="menuitem"><a href="#">Separated link</a></li>
        </ul>
        </ul>
    </div>
</div>

按钮下拉列表



行动

我面临的问题是，我不能像其他物品一样对齐物品的标签。 也许有人可以帮我把下拉列表中的字符串对齐

以下是我得到的图片：

我使用angular、bootstrap和bootstrap UI

---

小提琴链接：

应该是对自定义CSS文件的简单添加：

.dropdown-menu > li > div {
    padding: 0 20px;
}

---

（OP的代码分支-谢谢）

您能回答另外一个问题吗？也许您知道在我单击其中一个“自定义按钮”时不关闭下拉列表的简单方法？